web-dev-qa-db-ja.com

CSSの特異性、メディアクエリ、最小幅

レスポンシブウェブデザインと「モバイルファースト」の方法を念頭に置いてブログを再設計しています-簡単に言うと、最小幅を使用してあらゆる種類のレプリケーションや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宣言が存在することがわかりますが、他の宣言が優先されます。 。意味がありません！

より強力なセレクターやmax-widthを使用せずに、min-widthsを使い続け、より高い解像度で宣言を効果的に上書きできますか？

cssmedia-queriescss-specificity
30
George Katsanos

私は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; }
}
34
BoltClock