on:2022年6月20日sponsorsこれを待ち望んでいた人も多いと思います。400px){}と記述できます。比較演算子だと、400pxを含む「以上」というのも分かりやすいですね。Andrew下記は各ポイントを意訳したものです。※当ブログでの翻訳記事は、元サイト様のライセンスに基づいて翻訳しています。メディアクエリの範囲指定の新しい構文メディアクエリはレスポンシブデザインを可能にし、ビューポートの最小サイズと最大サイズを定義する範囲指定は、メディアクエリを採用しているWebサイトの80%で使用されています。4には、この範囲指定のための新しい構文が含まれています。新しい構文は、Firefoxは63から、Chromeは104から利用できるようになります。この構文によってメディアクエリをどのように効率化できるかを見てみましょう。メディアクエリの範囲指定で、比較演算子を使用できるビューポートの最小幅を定義する一般的なメディアクエリは、下記のように記述されます。幅が400ピクセル以上のスタイル}新しい構文では、比較演算子を使用できます。幅が400ピクセル以上のスタイル}続いて、最大幅で見てましょう。今までの一般的なメディアクエリは、下記のように記述されます。幅が30em以上のスタイル}新しい構文で、比較演算子を使用すると下記の通りです。幅が30em以上のスタイル}比較演算子は、2つの幅を定義する時により効率化されます。最小幅400px、最大幅600pxのビューポートの場合、今までは下記のように記述していました。400px〜600pxのスタイル}これは、新しい構文で下記のように記述できます。widthが2つの値の間にあることに注目してください。400px〜600pxのスタイル}メディアクエリの冗長性を減らすだけでなく、この新しい構文には正確さという利点もあります。min-とmax-クエリには、定義された値が含まれます。400pxは、400pxを含む以上ということです。新しい構文の比較演算子を使用すると、意味をより明確にし、クエリの衝突する可能性を回避することもできます。>)のみにも対応しています。401px〜599pxのスタイル}widthは、400pxにも600pxにも等しくないです。Minmaxが用意されています。