メディア query_html/css_WEB-ITnose での条件の重複

レスポンシブ レイアウトに触れたことのある友人は、このキー属性によってメディア クエリが実現されることをよく知っているはずです。一部のレスポンシブ レイアウト チュートリアルでは、通常、さまざまなビューポート幅の条件下でレイアウトの例を実現するために次のような同様の設定を作成します:

@media screen and (max-width:600px){/* Style 1*/}

@media screen and (min- width:600px) and (max-width:960px){/* style two*/}

@media screen and (min-width:960px){/* style three*/}

これらによると、チュートリアルでは次のように説明されています。この設定の効果は次のとおりです。ビューポートの幅が 600 ピクセル以下の場合はスタイル 1 を適用し、ビューポートの幅が 600 ピクセル以上 960 ピクセル以下の場合はスタイル 2 を適用します。 960px 以上の場合、スタイル 3 を適用します。一見すると、ビューポートの幅に応じて 3 つのスタイル効果が設定されていますが、よく見ると問題が発生します。上記でビューポートの幅を説明する場合、論理関係「等しい」が使用されます。 1 つのルールだけに注目すると言うことはありませんが、600px と 960px の 2 つの値は 2 つのルールを同時に満たします。つまり、最初のルールは 600px 以下であり、 2 番目のルールは 600px 以上であるため、条件が重複するという問題が発生します。では、ウィンドウの幅がちょうど 600px または 960px の境界値にある場合はどうなるでしょうか?

デモは非常に単純で、ブラウザのビューポートの幅が 600px から 960px の範囲内で色が切り替わることに注目してください。 ;色はメディア クエリ設定の影響を受けます。ブラウザの幅はフォームを手動で拡大することで調整され、ウィンドウ オブジェクトの onresize イベントは、現在のウィンドウ幅の値をコンソール ウィンドウに出力するようにバインドされています。

上記の実験により、ブラウザの幅の値が 600px の場合でも、効果はスタイル 1 の効果に留まることがわかりました。幅を601pxに調整するとスタイル2の効果になります。つまり、ある値が、ある条件の上限値となり、別の条件の下限値となる場合、下限条件に対して等値の関係は含まれません。同様に、スタイル 3 の min-width:960px についても、960px より大きい場合を意味し、960px に等しい場合は含みません。

別の状況として、例えば、水平配置を垂直配置に変更するなど、異なるビューポート幅で Web ページ要素のレイアウトを変更したい場合があります。この種のページが 600px または 960px のカットオフ値にある場合、ページ要素の配置は CSS で設定されたルールに準拠しません。実際にどのようになるかを自分で試してみることができます。