| ルール名 | @media |
|---|---|
| 構文 |
@media ( condition ) [and ( condition )]... [, ...]
@media media_type [and ( condition )]... [, ...]
|
| サポート | https://caniuse.com/?search=%40media |
@media により、スタイルシートを適用する条件を指定することができます。例えば、スマートフォンサイズの場合と、PCディスプレイサイズの場合で、適用するスタイルシートを変更することができます。
出力の対象メディアを指定します。下記の例では、em要素を、ディスプレイ(screen)の場合は赤色、印刷(print)の場合は太字で出力します。
@media screen {
em { color: red; }
}
@media print {
em { font-weight: bold; }
}
メディアタイプには下記などがあります。screen と print 以外はまだ対応ブラウザは少ないようです。
@media に続けて、下記の様な条件を記述することができます。
/* 幅が 767px 以下であれば(最大値が767pxであれば) */
@media (max-width: 767px) { ... }
条件を and で連結することもできます。
/* 幅が 768px以上 1200px以下であれば */
@media (min-width:768px) and (max-width:1200px) { ... }
/* モノクロ印刷であれば */
@media print and (monochrome) { ... }
not で否定にすることもできます。
/* 画面がモノクロでなければ */
@media not (monochrome) { ... }
カンマ(,)は or の意味になります。
/* カラーディスプレイまたはモノクロ印刷であれば */
@media screen and (color), print and (monochrome) { ... }
only はメディア特性に未対応の古いブラウザでスタイルが適用されてしまうのを防ぎます。最近のブラウザでは効果ありません。
@media only screen and (color) { ... }
「720px以上」を「最小値が720px(min-width: 720px)」の様に表すのが分かりづらいというのもあり、最近では下記の書き方もサポートされるようになってきました。(→対応状況)
@media (min-width: 720px) { ... } /* 最小値が720px＝720px以上 */
@media (720px <= width) { ... } /* 720px以上 */
@media (min-width: 720px) and (max-width: 1400px) { ... }
@media (720px <= width <= 1400px) { ... }
条件には下記などの属性を指定することができます。(min-/max-) とあるものは、min-width, max-width などのように最少/最大のプレフィックスをつけることができます。
/* ブラウザの横幅が767px以下であれば */
@media (max-width: 767px) { ... }
/* ブラウザの高さが500px以下であれば */
@media (max-height: 500px) { ... }
/* デバイスの横幅が767px以下であれば */
@media (max-device-width: 767px) { ... }
/* デバイスの高さが500px以下であれば */
@media (max-device-height: 500px) { ... }
/* ディスプレイが縦長であれば */
@media (orientation: portrait) { ... }
/* ブラウザの横幅が縦の2倍以上あれば */
@media (min-aspect-ratio: 2/1) { ... }
@media (min-aspect-ratio: 2) { ... }
/* デバイスの横幅が縦の2倍以上あれば */
@media (min-device-aspect-ratio: 2/1) { ... }
@media (min-device-aspect-ratio: 2) { ... }
/* カラーデバイスであれば */
@media (color) { ... }
/* RGB毎に8ビット以上であれば */
@media (min-color: 8) { ... }
/* カラー参照テーブルが使用され、その色数が256色以下であれば */
@media (color-index) and (max-color-index: 256) { ... }
/* 8Kテレビ並みの色域がサポートされていれば */
@media (color-gamut: rec2020) { ... }
/* 強制カラーモードが有効であれば */
@media (forced-colors: active) { ... }
/* 色反転モードであれば */
@media (inverted-colors: inverted) { ... }
/* モノクロ端末であれば */
@media (monochrome) { ... }
/* モノクロ端末であり、そのビット数が8以下であれば */
@media (monochrome) and (max-monochrome: 8) { ... }
/* 第一入力機構がホバー機構をサポートしていなければ */
@media (hover: none) { ... }
/* ホバー機構をサポートする機構がひとつもなければ */
@media (any-hover: none) { ... }
/* 第一入力機構がポインティング機構をサポートしていなければ */
@media (pointer: none) { ... }
/* ポインティング機構をサポートする機構がひとつもなければ */
@media (any-pointer: none) { ... }
/* 解像度が96dpi以上であれば */
@media (min-resolution: 96dpi) { ... }
/* ディスプレイの走査方式がインタレース方式であれば */
@media (scan: interlace) { ... }
/* ディスプレイがグリッド端末であれば */
@media (grid) { ... }
/* 電子書籍などのリフレッシュレートが遅い端末であれば */
@media (update: slow) { ... }
/* 縦方向にあふれたコンテンツがページ送りされるのであれば */
@media (overflow-block: page) { ... }
/* 縦方向にあふれたコンテンツが表示されないのであれば */
@media (overflow-inline: none) { ... }
/* アニメーションなどの視覚効果が抑制されていれば */
@media (prefers-reduced-motion: reduce) { ... }
/* スクリプトが無効になっていれば */
@media (scripting: none) { ... }