We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

概要

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 Images Module Level 3
<resolution> の定義
勧告候補  dppx 単位を追加
Media Queries
<resolution> の定義
勧告 初回定義

ブラウザ実装状況

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

機能 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,