33

レスポンシブ Web デザインと「モバイル ファースト」の方法を念頭に置いてブログを再設計しています。要するに、最小幅を使用して、あらゆる種類のレプリケーションや CSS を回避しようとしています。表示なし: なしなど..

私の問題は、CSS 値を上書きする必要がある場合、最小幅の低い方が優先されることです。例：

@media only screen and (min-width: 600px) {
    h2 { font-size: 2.2em; }
}

@media only screen and (min-width: 320px) {
    h2 { font: normal 1.7em/2.1em Helvetica, sans-serif; }
}

600px 以上の解像度で 2.2em h2 を取得することを期待しますが、代わりに 1.7em を取得します。私の開発ツールでは、2.2em 宣言が存在することがわかりますが、他の宣言が優先されます。 . 意味がない！

より強力なセレクターや最大幅を使用せずに、最小幅を使用し続け、より高い解像度で宣言を効果的に上書きできますか..?

4

1 に答える 1

36

600px 以上の解像度で 2.2em h2 を取得することを期待しますが、代わりに 1.7em を取得します。私の開発ツールでは、2.2em 宣言が存在することがわかりますが、他の宣言が優先されます。 . 意味がない！

それは理にかなっている。メディアが満たすなら、メディアmin-width: 600pxも満たすべきmin-width: 320pxです。つまり、600 は 320 よりも大きいため、幅が 600 ピクセル以上のものは幅が 320 ピクセル以上でもあります。

両方のメディア クエリが true と評価されるため、カスケードでは最後に発生するルールが優先され、コードは次のようになります。

h2 { font-size: 2.2em; }
h2 { font: normal 1.7em/2.1em Helvetica, sans-serif; }

2.2emこれが、開発者ツールに が表示されているのに、明らかな効果が得られない理由を説明しています。

@media最も簡単な修正方法は、ブロックを入れ替えて、ルールが正しい順序でカスケードされるようにすることです。

@media only screen and (min-width: 320px) {
    h2 { font: normal 1.7em/2.1em Helvetica, sans-serif; }
}

@media only screen and (min-width: 600px) {
    h2 { font-size: 2.2em; }
}
于 2012-04-25T19:09:00.280 に答える