resolution media query

概要

デバイスのピクセル密度（dpi / dppx）を検出し、高解像度ディスプレイ向けの最適なアセットを提供できる。Retinaディスプレイなどの高DPIデバイスに対して高解像度画像を出し分けるのに使用する。-webkit-min-device-pixel-ratio の標準代替となる。

対応ブラウザ

基本構文

/* 2倍以上の高解像度ディスプレイ */
@media (min-resolution: 2dppx) {
  .logo {
    background-image: url('logo@2x.png');
    background-size: 200px 60px;
  }
}

/* 印刷用の高解像度 */
@media print and (min-resolution: 300dpi) {
  .chart {
    background-image: url('chart-hires.png');
  }
}

実務での使いどころ

• Retina対応画像

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

注意点

アクセシビリティ

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

参考リンク

• MDN Web Docs — resolution
• Can I use — resolution media query