<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 で固定なので、1dppx96dpi と同じです。これは image-resolution で定義される、CSS の画像の既定の解像度に一致します。

x

dppx の別名です。

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

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

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

ブラウザーの互換性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
<resolution>
dpcm unit
dpi unit
dppx unit
x unit

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Partial support
Partial support
Has more compatibility info.

関連情報