概要

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

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

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

単位

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

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

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

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

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

仕様

仕様書 策定状況 コメント
CSS Values and Units Module Level 3
<resolution> の定義
勧告候補 型を因数分解してより一般的な列挙にした。変更なし
CSS Image Values and Replaced Content Module Level 3
<resolution> の定義
勧告候補  dppx 単位を追加
Media Queries
<resolution> の定義
勧告 初回定義

ブラウザ実装状況

機能 Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
基本サポート 未サポート [*] 3.5 (1.9.1) [**] 9 9.5 未サポート [*]
dppx ? 16.0 (16.0) ? 12.10 * ?
機能 Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
基本サポート 未サポート [*] yes ? yes 未サポート [*]
dppx ? 16.0 (16.0) ? 12.10 ?

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

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

関連情報

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

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