高DPI用CSS resolutionメディアクエリ
CSSのresolutionメディア機能をdppx、dpi、dpcm単位で使用して高DPI画面をターゲットにします。クロスブラウザの例とベンダープレフィックスのガイダンスを含みます。
Device Pixel Ratio
詳細な説明
resolutionメディア機能
CSSは出力デバイスのピクセル密度に基づいてスタイルを適用するためのresolutionメディア機能を提供します。
単位
| 単位 | 意味 | 1x相当 |
|---|---|---|
| dppx | ピクセルあたりのドット数 | 1dppx |
| dpi | インチあたりのドット数 | 96dpi |
| dpcm | センチメートルあたりのドット数 | 約38dpcm |
基本的な使い方
@media (min-resolution: 2dppx) {
.hero-bg {
background-image: url('hero@2x.jpg');
}
}
@media (min-resolution: 3dppx) {
.hero-bg {
background-image: url('hero@3x.jpg');
}
}
クロスブラウザ互換性
古いWebKitブラウザにはベンダープレフィックスが必要です：
@media
(min-resolution: 2dppx),
(-webkit-min-device-pixel-ratio: 2) {
/* 高DPIスタイル */
}
ベストプラクティス
- 明確さと精度のため
dpiよりdppxを優先する - メディアクエリ外にベース（1x）スタイルを常に提供する
- 背景画像にはよりクリーンな代替手段として
image-set()の使用を検討する
ユースケース
高DPI画面と標準画面で異なる背景画像を提供したり、細かい視覚的詳細（ボーダー、シャドウ）を調整するCSSの作成者がresolutionメディアクエリを使用します。