<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 の別名です。

例

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

@media print and (resolution >= 300dpi) {  /* … */}@media (resolution: 120dpcm) {  /* … */}@media (resolution >= 2dppx) {  /* … */}@media (resolution: 1x) {  /* … */}

有効な解像度

96dpi50.82dpcm3dppx

無効な解像度

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

仕様書

ブラウザーの互換性

関連情報

• resolution メディア特性
• image-resolution プロパティ
• メディアクエリーの使用