0

次の2つのメディアクエリがあります。

@media  (min-width: 320px) and (max-width: 359px){
    .hero-unit h1 {
        margin-bottom: 0;
        font-size: 0.2em;
        line-height: 0.5em;
        letter-spacing: -5px;
        color: inherit;
    }
    .hero-unit p {
        font-size: 0.2em;
        font-weight: 10;
        line-height: 0.5em;
        color: inherit;
    }   
    .hero-unit {
        background: url("../img/now320.jpg");
        height: 5em;
        width: 15em;      
        padding: 0.5em;
        margin-bottom: 2em;
        background-color: #eeeeee;
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        border-radius: 4px;
    }   
    h2 {
        font-size: 2em;
        font-weight: 20;
        line-height: 0.5em;
        color: inherit;
    }   
}

@media (min-width: 360px) and (max-width: 479px) {
    .hero-unit h1 {
        margin-bottom: 0;
        font-size: 0.2em;
        line-height: 1em;
        letter-spacing: -5px;
        color: inherit;
    }
    .hero-unit p {
        font-size: 0.2em;
        font-weight: 50;
        line-height: 1em;
        color: inherit;
    }   
    .hero-unit {
        background: url("../img/now360b.jpg");
        padding: 1em;
        margin-bottom: 2em;
        height: 10em;
        width: 18em;
        background-color: #eeeeee;
        -webkit-border-radius: 6px;
        -moz-border-radius: 6px;
        border-radius: 6px;
    }   
    h2 {
        font-size: 2em;
        font-weight: 20;
        line-height: 1em;
        color: inherit;
    }   
}

Firefoxのレスポンシブデザインツールを使用して幅を320pxに変更したにもかかわらず、320幅のルールがHTMLページにまったく適用されない理由を理解しようとしています。

Firebugを使用してCSSスタイルをチェックし、何が起こっているかを確認しました。@media (min-width: 360px) and (max-width: 479px)適用されている部分のみが表示されます。つまり、適用すべきと思うCSSルールが上書きされているわけではありません。何が起こっているのかというと、ルールはまったく適用されないということです。なんで？

4

2 に答える 2

1

ブラウザがビューポートを特定のサイズよりも小さくすることを単に許可しない場合があり、ラインが360前後下がっていると思うので、あなたが言及したツールを使用しても、単に登録されない可能性があります。実例を見る必要があるので、言えません。

実際のモバイルデバイス、または少なくともエミュレーターでサイトをチェックしましたか？OperaMobileEmulatorは非常に使いやすいです。

余談ですが、最初にモバイルで作業したい場合は、「ベースライン」エクスペリエンスとして、メディアクエリを使用せずに320デバイス用のCSSを最初に作成するというアイデアがあります。ここで、フォントファミリ、色、一般的に適用されるスタイルを指定します。次に、メディアクエリを追加して、ますます大きなサイズで機能します。ここで、レイアウトとテキストサイズの変更を指定します。重要なのは、320〜359のスタイルをメディアクエリでラップしないでください。これは、すべての人にとって基本的なエクスペリエンスになるからです。

于 2012-10-02T16:46:16.607 に答える
1

320px ルールをすべてのページに適用する場合は、次のように記述する必要があります。

@media  (min-width: 320px)

and (min-width....) なし

于 2012-10-02T16:08:40.040 に答える