CSS<resolution> データ型メディアクエリーresolutions で使われ、出力デバイスのピクセル密度である、解像度を表します。

画面では、長さは 物理的な値ではなく、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 のどれも表しません。

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

@media print and (min-resolution: 300dpi) { ... }

有効な解像度

96dpi
50.82dpcm
3dppx

無効な解像度

72 dpi     誤り: <number> と単位の間に空白を置いてはいけません
ten dpi    誤り: 数字以外を使ってはいけません
0          誤り: 0 値 の単位を省略できるのは <length> データ型 だけです。

仕様

仕様書 策定状況 コメント
CSS Values and Units Module Level 4
<resolution> の定義
編集者草案 x 単位を追加
CSS Values and Units Module Level 3
<resolution> の定義
勧告候補 dppx 単位を追加
Media Queries
<resolution> の定義
勧告 初回定義

ブラウザー実装状況

機能ChromeEdgeFirefoxInternet ExplorerOperaSafari
基本対応29123.599.5 あり
dppx units291216 なし12.1

あり1

なし2

x units ? ?62 ? ? ?
機能Android webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
基本対応 なし ?12 あり あり あり ?
dppx units ? ?121612.1

あり1

なし2

?
x units ? ? ?62 ? ? ?

1. Supported as device-pixel-ratio.

2. See bug 16832.

関連情報

ドキュメントのタグと貢献者

このページの貢献者: yyss, Sebastianz, Prinz_Rana, fscholz, sosleepy, ethertank, Marsf
最終更新者: yyss,