メディアクエリは、使用するデバイスのタイプ、ビューポートサイズ、画面のピクセル密度、さらにはデバイスの向きなどの要因に応じてスタイルを調整するための非常に強力な方法を提供します。 メディアクエリはかなり前から存在しているので、あなたはすでに基本的な構文と使用法に精通しているかもしれません。 したがって、この投稿は、優れたクイックリファレンスポイントとなることを目的としています。また、可能であるとは知らなかったいくつかのトリックも発見できることを願っています。
基本的なメディアクエリ
メディアクエリは、 @media at-ruleを使用して定義され、その後にメディアタイプ、0以上のメディア機能、またはメディアタイプとメディア機能の両方が続きます。 使用可能なメディアタイプは、 all 、 print 、 screen 、 spirit で、指定されていない場合はallのタイプです。 ]が暗示されます。 複数のメディアタイプを一度に使用でき、コンマで区切る必要があります。
@media screen, print { /* Styles for screen and print devices */ }
tvやprojectionなどのメディアタイプは、メディアクエリレベル4で非推奨になりました。
メディア機能については、括弧内に定義されており、さまざまな機能をテストできます。 最も人気のある機能には、幅、高さ、アスペクト比、向き、解像度があります。 これらの人気のある機能の多くは範囲機能であるため、minおよびmaxバージョンも利用できます(例: min-width 、 max-width 、 min-aspect-ratio 、 max-aspect-ratio 、…)
次の簡単な例では、デフォルトの背景色は hotpink ですが、ビューポート幅が650px以下の画面デバイスでは、代わりにrebeccapurpleの背景色になります。
body { background: hotpink; } @media screen and (max-width: 650px) { body { background: rebeccapurple; } }
メディアタイプとメディア機能の両方を指定するときに、それらの間でとの論理演算子を使用する必要があることに注意してください。
メディアタイプ、メディア機能、またはその両方を指定する単純なメディアクエリの例をさらにいくつか示します。
@media print { /* styles for print media only */ } @media (max-width: 65rem) { /* styles for any device that has a display width of 65rem or less */ } @media screen and (min-width: 800px) { /* styles for screen viewports that have a width of 800px or more */ }
複数のメディア機能
機能間でおよび論理演算子を使用して、メディアクエリを満たすために複数のメディア機能要件を指定できます。 とを使用する場合、クエリはすべての機能がtrueと評価された場合にのみ一致します。 たとえば、ビューポート幅のいくつかの異なる範囲に調整するレイアウトを持つことは非常に一般的です。
/* Extra-small */ @media screen and (max-width: 360px) { /* ... */ } /* Small */ @media screen and (min-width: 361px) and (max-width: 480px) { /* ... */ } /* Medium-only */ @media screen and (min-width: 481px) and (max-width: 960px) { /* ... */ } /* ... */
またはコンマを使用した論理演算子
カンマで区切って複数のクエリを定義できます。その場合、コンマは論理または演算子として機能し、クエリはクエリのリストになります。 メディアクエリは、コンマ区切りのクエリのいずれかが一致する場合に適用されます。
次の例では、デバイスの向きが portrait の場合、またはデバイスのビューポートの最小幅が3rem、最大アスペクト比が2/1の場合、メディアクエリはtrueになります。
@media (orientation: portrait), (min-width: 3rem) and (max-aspect-ratio: 2/1) { /* ... */ }
論理演算子ではありません
クエリの先頭でnot論理演算子を使用して、クエリ全体の真偽を切り替えることができます。 not 演算子は、ブラウザーまたはデバイスが特定の条件を満たさない場合にスタイルを適用するのに役立ちます。 次の例では、プライマリポインティングデバイスが要素にカーソルを合わせることができない場合にメディアクエリが適用されます。
@media not screen and (hover: hover) { /* ... */ }
not では、メディアタイプはオプションではないことに注意してください。 また、 not は、クエリリスト全体(コンマで区切られたクエリ)を無効にするのではなく、1つのクエリのみを無効にします。
論理演算子のみ
only 論理演算子は少し特殊で、古いブラウザのクエリ全体を非表示にします。 つまり、古いブラウザは only キーワードを理解しないため、メディアクエリ全体が無視されます。 それ以外の場合、のみは効果がありません。
@media only all and (min-width: 320px) and (max-width: 480px) { /* ignored by older browsers */ }
not 演算子と同様に、のみを使用する場合、メディアタイプはオプションではありません。 メディアクエリレベル3をサポートしないレガシーブラウザは現在ではまれであるため、ほとんどの場合、のみを使用する必要はありません。
メディアクエリレベル4からの追加
メディアクエリ仕様の最新版(レベル4)は、テストできるかなりの数の新しいメディア機能を指定しています。
- ポインター:プライマリポインティングデバイスがある場合(なし、粗いまたは細かい)。
- any-pointer :使用可能なポインティングデバイスがある場合( none 、 Coarse 、または fine )。
- ホバー:プライマリポインティングデバイスを要素にホバーできますか(なしまたはホバー)。
- any-hover :使用可能なポインティングデバイスのいずれかを要素にホバーできます(noneまたはhover)。
- color-gamut :使用可能な色の範囲( srgb 、p3またはrec2020)。
- オーバーフロー-インライン:インライン軸の潜在的なオーバーフローの処理方法(なし、ページ、オプション-ページまたはスクロール)。
- オーバーフローブロック:ブロック軸上の潜在的なオーバーフローの処理方法(なし、ページ、オプションページまたはスクロール)。
- update :レイアウトを更新できる頻度( none 、 slow 、または fast )。
Retinaディスプレイのメディアクエリ
過去数年間で、より高いピクセル密度のディスプレイを備えたデバイスが急増し始めました。 これらのより高いピクセル密度のデバイスでは、デザインの特定の側面を異なるスタイルにすることが役立つ場合があります。 良い例は、特定のグラフィックスの高解像度バージョンを提供することです。
これは、192dpiの値を持つmin-resolutionメディア機能を使用して実現できます。 ただし、解決機能は必ずしもすべてのブラウザでサポートされているわけではありません。より確実なアプローチとして、2の値を持つ非標準の-webkit-min-device-pixel-ratio機能を追加することもできます。
@media screen and (min-resolution: 192dpi), (-webkit-min-device-pixel-ratio: 2) { /* ... */ }
解像度メディア機能の現在のブラウザサポートは、Can IUseで追跡できます。
資力
以下は、いくつかの非常に便利なメディアクエリ関連のリソースです。
- CSS-Tricksの標準デバイスのメディアクエリ。
- MQTest.io 、デバイスが応答するメディア機能をテストします。
- MDNの利用可能なメディア機能のリファレンス。