メディアクエリの指定方法まとめ

メディアクエリ指定方法のすべてをまとめました。

横幅だけではないんですよ。

ブラウザの幅

まずはオーソドックスにブラウザの幅による指定。

@media screen and (min-width: 500px) { /* 500px より大きい時の記述 */ }
@media screen and (max-width: 500px) { /* 500px より小さい時の記述 */ }
@media screen and (min-width: 500px) and (max-width: 800px) { /* 500px より大きい、800px より小さい時の記述 }

ブラウザの高さ

witdhの高さ版。

@media screen and (min-height: 500px) { /* 500px より大きい時の記述 */ }

縦 or 横

横向きか、縦向きかを判断してくれる値です。スマホやヒーローイメージなどで重宝します。スマホだけでなくPCブラウザでも同様の動きをします。

指定できる値は以下の2つ。

  • landscape: 高さより幅が広い表示
  • portrait: 幅より高さが高い表示
@media all and (orientation: portrait) { /* 幅より高さが高いときの記述 */ 
@media all and (orientation: landscape) { /* 高さより幅が広いときの記述 */ }

デバイスの幅

デバイスごとの幅で設定することもできます。しかしGoogleでは推奨されていないので、使う必要もないでしょう。

一応指定方法。

@media only screen and (max-device-width: 500px) { /* デバイスのは場が500 より小さいときに記述 */ }

*-device-width に基づくクエリを作成することもできますが、この方法は使用しないことを強くおすすめします

前出の方法とこの方法の間には、わずかではあるものの極めて重要な違いがあります。min-width はブラウザ ウィンドウのサイズに基づきますが、min-device-width は画面のサイズに基づいています。一部のブラウザ(古い Android ブラウザを含む)ではデバイスの幅が正しく通知されず、画面の幅が、予期されるビューポートの幅ではなくデバイス ピクセルで通知される場合があります。

さらに、*-device-width を使用すると、ウィンドウのサイズ変更が可能なパソコンや他のデバイスでコンテンツが対応できないことがあります。これは、クエリがブラウザ ウィンドウのサイズではなく実際のデバイスのサイズに基づいているためです。

https://developers.google.com/web/fundamentals/design-and-ui/responsive/?hl=ja

アスペクト比

アスペクト比を指定することも可能です。

縦向きか横向きかの指定もこちらで補うこともできるのでわたしはこちらを多様してます。

@media screen and (min-aspect-ratio: 1/1) { 高さよりも幅が広いときの記述 

アスペクト比が 1:1 以上の場合のスタイルです。