CSSのMedia Queries Level 4で拡張されたメディアクエリの範囲指定

CSSのメディアクエリの記述方法は、コーディングでWebサイトを構築していくうえで、レスポンシブ対応やデバイスごとのスタイリングにはよく利用していく書き方でしょう。

CSSも年々アップデートされる中、Media Queries Level 4ではRange型が扱えるようメディアクエリの構文が拡張されました。

デバイス幅の範囲はこれまでのmin-widthやmax-widthのほか、比較演算子を利用した範囲指定ができるようになり、シンプルに記述していくことができます。

以下、サポートされているWebブラウザの情報になります。
主要ブラウザはすべてサポートしております。

Can I use (Range syntax from Media Queries Level 4)
https://caniuse.com/mdn-css_at-rules_media_range_syntax

CSSの構文の拡張とのことで、今後は多くのWebブラウザがサポートされてくると思いますので、これまでとはまた別の記述方法として覚えておくと良いでしょう。

追加されたメディアクエリの範囲指定

例えば、スマートフォンなどのモバイル端末でのスタイルを指定する場合で見てみます。
これまでの範囲指定は以下のような記述でありました。
（適当にスタイルをあてております）

CSS

@media screen and (max-width:767px) {
  body {
    background-color: #00f;
  }
}

Media Queries Level 4では構文の拡張により、以下のように比較演算子を利用した範囲指定ができるようになります。

CSS

@media screen and (width <= 767px) {
  body {
    background-color: #00f;
  }
}

767px以下ということで、767pxを含む小さいサイズで「max-width」と同じ範囲指定となります。

また、andなど論理演算子を用いた複合条件での範囲指定も比較演算子が利用できます。
先ほどのモバイル端末の続きで、タブレット端末の縦画面での幅を範囲としますと、以下のように記述していきます。

まずはこれまでの記述です。

CSS

@media screen and (min-width:768px) and (max-width:919px) {
  body {
    background-color: #f00;
  }
}

この複合条件も以下のように、比較演算子を利用してシンプルに記述することができます。

CSS

@media screen and (768px <= width < 920px) {
  body {
    background-color: #f00;
  }
}

比較演算子は以下のようにしても同じとなります。

@media screen and (767px < width < 920px)

指定した数値を含むか含まないかは、以下や以上、より大きい、より小さいといったところを理解して記述していくようにしましょう。

ここまでの流れをモバイルファーストで記述していくと、以下のようなメディアクエリでまとめることができます。

CSS

/*------------------------------------------------------
 Base (Mobile First)
------------------------------------------------------*/
body{
  color: #333;
  width: 100%;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
  font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', '游ゴシック  Medium', meiryo, sans-serif;
}


/*------------------------------------------------------
 Mobile
------------------------------------------------------*/
@media screen and (width <= 767px) {
  body {
    background-color: #00f;
  }
}


/*------------------------------------------------------
 Tablet ~
------------------------------------------------------*/
@media screen and (width >= 768px) {
  body {
    background-color: #f00;
  }
}


/*------------------------------------------------------
 PC
------------------------------------------------------*/
@media screen and (width >= 920px) {
  body {
    background-color: #0f0;
  }
}

最初はすべてのデバイス幅に適応されるベースとなるスタイルとして、
タブレット端末からは「@media screen and (width >= 768px)」とし、タブレット端末の横画面やPCでは「@media screen and (width >= 920px)」とします。

モバイル端末だけ適応させるということも多いので、モバイル端末の幅「@media screen and (width <= 767px)」をベースの後に記述しておきます。
論理演算子「and」を用いた複合条件は、特定の範囲のデバイス幅での調整が必要な時に利用するとよいでしょう。

以下、実装結果になります。
動画（3分ほど）