範囲メディアクエリの新しい構文

この新しい構文によってメディアクエリを効率化する方法をご確認ください。

Rachel Andrew

メディアクエリによりレスポンシブ デザインが可能になり、ビューポートの最小サイズと最大サイズをテストできる範囲機能は、メディアクエリを使用するサイトの約 80% で使用されています。Media Queries Level 4 仕様では、これらの範囲クエリの構文が改善されています。

次の例は、クエリを効率化する方法を示しています。

ビューポートの最小幅をテストする一般的なメディアクエリは、次のように記述します。

@media (min-width: 400px) {
  // Styles for viewports with a width of 400 pixels or greater.
}

新しい構文では、比較演算子を使用できます。

@media (width >= 400px) {
  // Styles for viewports with a width of 400 pixels or greater.
}

最大幅のテスト:

@media (max-width: 30em) {
  // Styles for viewports with a width of 30em or less.
}

レベル 4 の構文を使用するバージョン:

@media (width <= 30em) {
  // Styles for viewports with a width of 30em or less.
}

この構文は、特に 2 つの幅をテストする場合に、クエリを合理化できる可能性があります。次の例では、メディアクエリで、最小幅が 400 ピクセル、最大幅が 600 ピクセルのビューポートをテストしています。

@media (min-width: 400px) and (max-width: 600px) {
  // Styles for viewports between 400px and 600px.
}

これは、新しい構文で次のように書き直すことができます。

@media (400px <= width <= 600px )  {
  // Styles for viewports between 400px and 600px.
}

テストする機能（この場合は width）を 2 つの値の間に配置します。

新しい構文には、メディアクエリが冗長になるだけでなく、精度が高いという利点があります。min- クエリと max- クエリは、指定された値を含みます。たとえば、min-width: 400px は幅が 400 ピクセル以上のテストです。新しい構文を使用すると、意図する内容をより明確に指定し、クエリの競合を回避できます。

新しい範囲構文をまだ実装していないブラウザを考慮しながら新しい範囲構文を使用するには、スタイルシートで新しい構文を古い構文に書き換える PostCSS プラグインがあります。