<resolution>

Baseline 2022

Newly available

Since September 2022, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

<resolution> は CSS のデータ型で、メディアクエリーの解像度を記述するのに使われ、出力機器のピクセル密度である解像度を表します。

画面では、長さは物理的な値ではなく、 CSS のインチ、センチメートル、またはピクセルと関連づけられます。

構文

<resolution> データ型は、厳密に正の <number> のすぐ後ろに解像度の単位を続けます。他の CSS の寸法と同じく、単位のリテラルと数字の間に空白はありません。

単位

dpi: 1 インチあたりのドット数を表します。画面でよく使われるのは 72 または 96 dpi です。印刷物の dpi は通常、これより大きくなります。1 インチは 2.54 cm なので、1dpi ≈ 0.39dpcm です。
dpcm: センチメートルあたりのドット数を表します。1 インチは 2.54 cm なので、1dpcm ≈ 2.54dpi です。
dppx: ピクセル (px) あたりのドット数を表します。CSS の in と CSS の px の比率は 1:96 で固定なので、1dppx は 96dpi と同じです。これは image-resolution で定義される、CSS の画像の既定の解像度に一致します。
x: dppx の別名です。

メモ: 仮に値 0 に対しすべての単位が同じ解像度を表すとしても、単位を省略してはいけません。言い換えると 0 は無効で、0dpi、0dpcm、0dppx のどれも表しません。

例

メディアクエリーで使用する

css

@media print and (min-resolution: 300dpi) {
  /* … */
}

@media (resolution: 120dpcm) {
  /* … */
}

@media (min-resolution: 2dppx) {
  /* … */
}

@media (resolution: 1x) {
  /* … */
}

有効な解像度

96dpi
50.82dpcm
3dppx

無効な解像度

72 dpi     数値と単位の間に空白は許可されていません。
ten dpi    数値は10進数しか使えません。
0          単位は必須です。

仕様書

Specification
CSS Values and Units Module Level 4 # resolution

ブラウザーの互換性

BCD tables only load in the browser