通常の CSS ルールが CSS のメディア クエリをオーバーライドするのはなぜですか?

メディア クエリと 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 サイトの他の関連記事を参照してください。