<resolution>

概要

CSS の <resolution> データ型は メディアクエリーで使われ、出力デバイスのピクセル密度である、解像度を表します。他の CSS の寸法と同じく、<number> のすぐ後ろに解像度の単位 (dpi, dpcm, ...) を続けます。単位のリテラルと数字の間に空白はありません。

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

仮に値 0 に対してすべての単位が同じ解像度を表すとしても、これは <length> ではないので、単位を省略してはいけません。0 は無効で、0dpi、0dpcm、0dppx のどれも表しません。

単位

dpi

1インチあたりのドット数 を表します。画面でよく使われるのは 72 または 96 dpi です。印刷物の dpi は通常、これより大きくなります。1 インチは 2.54 cm なので、1dpi ≈ 2.54dpcm です。

dpcm

センチメートルあたりのドット数 を表します。1 インチは 2.54 cm なので、 1dpcm ≈ 0.39dpi です。

dppx

ピクセル（px）あたりのドット数を表します。CSS の inch と CSS の px の比率は 1.96 で固定なので、1dppx は 96dpi と同じです。これは image-resolution で定義される、CSS の画像のデフォルトの解像度に一致します。

例

以下は <resolution> 値の正しい使い方です:

96dpi                                              正しい使い方: <number>（ここでは <integer>）に続けて単位があります。
@media print and (min-resolution: 300dpi) { ... }  メディアクエリーのコンテキストでは正しい使い方

以下は正しくない使い方です:

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

仕様

ブラウザ実装状況

[*] Webkit エンジンは 仕様書にあるように CSS の resolution クエリーをサポートしておらず、Chrome や Safari のようなブラウザでは 非標準の device-pixel-ratio クエリーの利用が必要です。bug 16832 をご覧ください。

[**] Firefox 8 (Gecko 8.0) 以前は、誤って <integer> に単位を続けた CSS の寸法 だけを受け入れていました。このバージョンからは有効な CSS 寸法（<number> に単位が続くもの）をすべてサポートしています。

関連情報

• CSS メディアクエリ