web-dev-qa-db-ja.com

pxの代わりにCSSメディアクエリでDPIを使用する方法はありますか

ピクセル数の幅と高さは、必ずしも全体を物語っているとは限りません。これは、アイテムを画面に追加または画面から削除するのに最適ですが、適切な画像を設定するのには適していません。 MBPのRetinaディスプレイでは、画面の半分に設定されたブラウザウィンドウの幅は、現在のほとんどのマシンと同じピクセル数になります。ただし、DPIが高いと、表示される画像が小さすぎる可能性があります。

ピクセル数の幅と高さではなく、DPIに基づいて画像を変更する方法はありますか？

cssmedia-queries
18
Dennis Burton

次のいずれかを実行できます。

<link
    rel="stylesheet"
    type="text/css"
    href="/css/retina.css"
    media="only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2)"
/>

または

@media only screen and (-moz-min-device-pixel-ratio: 2), 
       only screen and (-o-min-device-pixel-ratio: 2/1), 
       only screen and (-webkit-min-device-pixel-ratio: 2), 
       only screen and (min-device-pixel-ratio: 2) {
 /*use CSS to swap out your low res images with high res ones here*/
}
20
Moin Zaman

あなたが探しているのは、デバイスのピクセル比です。 iPhoneのようなものは320ピクセルの画面のように表示されますが、640ピクセルのレイアウト（ピクセル比2）です。メディアクエリでは、「device-pixel-ratio」を使用します。ただし、ベンダープレフィックスは引き続き使用するようにします。

良い投稿： http://menacingcloud.com/?c=highPixelDensityDisplays

2
Jay Harris

もあります <img srcset>および-webkit-image-set css関数ですが、Safari/Chrome/Operaでのみサポートされているようです。例：

<img src="image.png" srcset="image-1x.png 1x, 
     image-2x.png 2x, image-3x.png 3x">

background-image:  -webkit-image-set(
     url(icon1x.jpg) 1x,
     url(icon2x.jpg) 2x
);

Moin Zamanが承認した回答の例がIE/Firefoxで動作するかどうかはわかりません。おそらく「最小解像度」を使用する必要があります：

@media only screen and (min-resolution: 192dpi),
       only screen and (min-resolution: 2dppx)
1
Czarek Tomczak

2019では、safariを除くすべての最新ブラウザーで、解像度、最小解像度、最大解像度のメディアクエリを使用できます。

@media (min-resolution: 72dpi) {
  p {
    text-decoration: underline;
  }
}

をご覧くださいhttps://developer.mozilla.org/en-US/docs/Web/CSS/@media/resolution

0
bjelli