メディアクエリについて調べる
メディアタイプ
ざっくりと表示媒体を分類するメディアクエリである。
- all
- screen
- speech
すべてのメディアタイプに対応
ページ区切りが発生する印刷プレビュー等に対応
ディスプレイに対応
音声デバイスに対応
update
コンテンツの表示をどの程度の頻度で更新できるかで分岐させることができる。
- none
- slow
- fast
印刷してしまえば更新できない紙媒体など
低性能なブックリーダーなどのデバイス
CSSアニメーションが動作できるようなパソコン等のデバイス
@media (update: fast)
{
body
{
background: tomato;
}
}orientation
メディアディスプレイが縦長なのか、横長なのかで作用を変えることができる。
- landscape
- portrait
横長画面のときに作用する。
縦長画面のときに作用する。
ビューポート
レスポンシブデザインでよく使われるメディアクエリである。メディアディスプレイのビューポートの高さと幅に対してmin-width、max-widthといった尺度を用いて使う。
- width
- height
ビューポートの幅に対して作用する。
ビューポートの高さに対して作用する。
prefers-color-scheme (L5)
いわゆるダークテーマへの対応に使われるメディアクエリである。OSの設定によって左右される。
- light
- dark
ライトテーマだけを求められた場合に適用。
ダークテーマだけを求められた場合に適用
@media (prefers-color-scheme: dark)
{
body
{
background: dimgray;
color: whitesmoke;
}
}
@media (prefers-color-scheme: light) {
body
{
background: whitesmoke;
color: dimgray;
}
}aspect-ratio
メディアのビューポート縦横比率による分岐をすることができる。min-aspect-ratio、max-aspect-ratioと合わせて使用する。
@media (min-aspect-ratio: 16/9)
{
body
{
background: tomato;
}
}resolution
メディアディスプレイの解像度をもとに分岐することができる。min-resolution、max-resolutionで下記単位を利用して指定する。
- dpi (1インチあたりのドット数)
- dpcm (1センチあたりのドット数)
- dppx (1pxあたりのドット数、1dppx = 96dpi)
@media (min-resolution: 72dpi)
{
p
{
body: yellow;
}
}color
メディアディスプレイの色深度(color depth)を元に分岐する。
//デフォルト
@media (color)
{
body
{
color: tomato;
}
}
//8bit (2^8)以上の場合
@media (min-color: 8)
{
body
{
color: skyblue;
}
}color-index
メディアディスプレイの対応色数によって分岐することができる。colorではビット数で指定していたがcolor-indexではダイレクトに数で指定する。min-color-index、min-color-indexで色数を指定する。
color-gamut (L4)
メディアディスプレイの色空間(color space)を元に分岐させる。
- srgb
- p3
- rec2020
ディスプレイとしては世間一般によく普及しているレベルのもの
某Apple社のメディアで実装されているらしい(wikipedia)
4K、8Kといったディスプレイのうち色深度が一定以上のものを指す(wikipedia)
@media (color-gamut: srgb)
{
body
{
color: tomato;
}
}
@media (color-gamut: rec2020)
{
body
{
color: skyblue;
}
}monochrome
メディアディスプレイがモノクロかどうかを判定して分岐することができる。color-xxx系とは真逆でモノクロかどうかを判定するためにある。モノクロ機器であれば0以上のピクセルあたりビット数を返す。min-monochrome、max-monochromeで範囲指定が可能。
//カラーディスプレイの検出
@media (monochrome: 0)
{
body
{
color: tomato;
}
}grid
メディアディスプレイがグリッドベースに対応しているかで分岐させる。
//ビットマップに対応したディスプレイ
@media (grid: 0)
{
body
{
color: skyblue;
}
}
//グリッドベースに対応したディスプレイ
@media (grid: 1)
{
body
{
color: tomato;
}
}scan
メディアディスプレイの描画プロセスによって分岐することができる。
- interlace
- progressive
一部のテレビはこれらしい
だいたいのパソコンはこれらしい
@media (scan: progressive)
{
body
{
color:tomato;
}
}any-hover (L4)
メディアディスプレイがhoverエフェクトの対象となる機器であるかで分岐することができる。パソコンとスマホの分類ができる。
- none
- hover
非対応のデバイス(スマホ)
対応するデバイス(パソコン)
//パソコンでのみ機能するhoverエフェクト
@media (any-hover: hover)
{
body:hover {
background: tomato;
}
}hover (L4)
- none
- hover
hoverができない、またはできるが差し支えがある(スマートフォンのロングタップなど)メディア
確実にホバーができるメディア(パソコンなど)
@media (hover: hover)
{
body
{
background: tomato;
}
}any-pointer (L4)
少なくとも1つが存在し、かつすべてのポインティングデバイスの精度を元に分岐することができる。1つのポインティングデバイスについて判定する場合はpointerを使う。
- none
- fine
- coarse
そもそもポインティングデバイスがない
パソコン
スマホ
//パソコンでのみ機能する
@media (any-pointer: fine)
{
body
{
background: tomato;
}
}pointer (L4)
少なくとも1つが存在し、かつその中の1つのポインティングデバイスの精度を元に分岐することができる。複数のポインティングデバイスについて判定する場合はany-pointerを使う。
- none
- fine
- coarse
そもそもポインティングデバイスがない
パソコン
スマホ
//パソコンでのみ機能する
@media (pointer: fine)
{
body
{
background: tomato;
}
}display-mode
PWAに対応したアプリの表示状態で分岐することができる。
- fullscreen
- standalone
- minimal-ui
- browser
フルスクリーン表示の場合
ブラウザのナビゲーションがないアプリの場合
ブラウザのナビゲーションがあるアプリの場合
ブラウザで開いた場合
@media all and (display-mode: fullscreen)
{
body
{
background: tomato;
}
}prefers-reduced-motion (L5)
ユーザーOSでアニメーションの可否を設定している場合に分岐できる。
- no-preference
- reduce
ユーザーがアニメーションに関するOS設定をしていない場合
ユーザーがアニメーションに関するOS設定をしている場合
@media (prefers-reduced-motion: reduce)
{
.animationnName
{
animation: none;
}
}