メディア クエリと CSS の優先順位
CSS では、メディア クエリの優先順位は通常の CSS ルールよりも低くなります。これは、スタイルが適用される順序を決定する一連のルールである CSS カスケードによって決定されます。
メディア クエリの優先順位が低い理由
メディア クエリは優先されません。セレクターの特異性を高めます。これは、通常の CSS ルールとメディア クエリが同じ特異性を持つ同じ要素をターゲットにしている場合、通常の CSS ルールが優先されることを意味します。
例:
考慮してください次のコード:
.logo img { width: 100%; } @media screen and (min-width: 100px) and (max-width: 1499px) { .logo img { width: 120%; } }
この例では、メディア クエリの優先度は非メディア クエリ ルールよりも低くなります。したがって、ビューポート サイズがメディア クエリと一致する場合でも、非メディア クエリ ルールが適用され、画像の幅は 100% に設定されます。
回避策
通常の CSS ルールよりもメディア クエリを優先するには、2 つのオプションがあります:
1.ルールの順序を入れ替え
メディア クエリが非メディア クエリ ルールの後に来るように CSS ルールを並べ替えます:
.logo img { width: 100%; } @media screen and (min-width: 100px) and (max-width: 1499px) { .logo img { width: 120%; } }
2.セレクターの詳細度を高める
セレクターを追加してメディア クエリ ルールの詳細度を高めます:
@media screen and (min-width: 100px) and (max-width: 1499px) { .logo a img { width: 120%; } }
Avoid ! important
Doメディア クエリの優先順位をオーバーライドするために「! important」宣言を使用しないでください。これにより、「! important」の過剰な使用につながり、CSS の特異性の管理が困難になります。
以上が通常の CSS ルールが CSS のメディア クエリをオーバーライドするのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。