Widely available 全主要ブラウザで対応済み。安心して使用できる。

resolution media query

resolution は CSS のメディア特性で、出力端末のピクセル解像度を検査するために使用することができます。

メディアクエリ高解像度

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
css.at-rules.media.resolution
29
12
8
16
29
16
css.types.resolution

は CSS の データ型 で、解像度をメディアクエリーで記述するのに使われ、出力機器のピクセル密度である解像度を表します。
29
12
8
16
29
16
CSS タイプ
dpcm

「dpcm」単位
29
12
8
16
29
16
dpi

「dpi」単位
29
12
8
16
29
16
dppx

「dppx」単位
29
12
16
16
29
16
x

`x` ユニット
68
79
62
16
68
16
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)
注釈 3件
制限事項
  • このブラウザでは部分的にしか実装されていません
削除済み
  • このバージョンで機能が削除されました (8)
実装メモ
  • `<integer>` 値のみをサポートします。
注釈 3件
制限事項
  • このブラウザでは部分的にしか実装されていません
削除済み
  • このバージョンで機能が削除されました (8)
実装メモ
  • `<integer>` 値のみをサポートします。

基本構文

CSS 
/* Displays with a resolution of 2x or higher */
@media (min-resolution: 2dppx) {
  .logo {
    background-image: url('logo@2x.png');
    background-size: 200px 60px;
  }
}

/* High resolution for printing */
@media print and (min-resolution: 300dpi) {
  .chart {
    background-image: url('chart-hires.png');
  }
}

ライブデモ

1x resolution

resolution media query 1x resolution demo.

プレビュー全画面表示

2x resolutionsupport

resolution media query 2x resolutionsupport demo.

プレビュー全画面表示

printuse 300dpi

resolution media query printuse 300dpi demo.

プレビュー全画面表示

実務での使いどころ

  • Retina対応画像

    高解像度ディスプレイに2x/3xの画像を出し分けてシャープな表示を実現する。

注意点

  • 現代では <img srcset> や image-set() の方が画像の出し分けには適しているケースが多い。

アクセシビリティ

  • 高解像度画像の提供はテキストの代わりに画像を使うケースでの視認性向上に寄与するが、alt テキストの設定も忘れない。

参考リンク