<resolution>
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2022.
Please take two minutes to fill out our short survey.
<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の別名です。
メモ:
仮に値 0 に対しすべての単位が同じ解像度を表すとしても、単位を省略してはいけません。言い換えると 0 は無効で、0dpi、0dpcm、0dppx のどれも表しません。
例
メディアクエリーで使用する
@media print and (min-resolution: 300dpi) {
/* … */
}
@media (resolution: 120dpcm) {
/* … */
}
@media (min-resolution: 2dppx) {
/* … */
}
@media (resolution: 1x) {
/* … */
}
有効な解像度
96dpi 50.82dpcm 3dppx
無効な解像度
72 dpi 数値と単位の間に空白は許可されていません。 ten dpi 数値は10進数しか使えません。 0 単位は必須です。
仕様書
| Specification |
|---|
| CSS Values and Units Module Level 4 # resolution |
ブラウザーの互換性
関連情報
- resolution メディア特性
image-resolutionプロパティ- メディアクエリーの使用