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

Question

ピクセル数の幅と高さが必ずしも全話を伝えるわけではありません。これは、画面に項目を追加したり削除したりするのには効果的ですが、正しい画像を設定するには適切ではありません。 MBPの網膜ディスプレイでは、画面の半分に設定されたブラウザウィンドウは、今日のほとんどのマシンと同じ幅のピクセル数を持ちます。しかし、表示される画像はDPIが高いほど小さすぎる可能性があります。

ピクセルの幅と高さではなく、DPIに基づいてイメージを変更する方法はありますか？あなたがいずれかを実行することができます

Answer 1

：あなたが探しているものを

<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*/ 
} 

Answer 2

は、デバイスピクセルの比率です。 iPhoneのようなものは320pxの画面のように表示されますが、640pxのレイアウト（ピクセル比2）のものがあるためです。メディアクエリでは、 "device-pixel-ratio"を使用します。私はまだベンダーの接頭辞を使用することを確認しますが。

その上で良い記事：http://menacingcloud.com/?c=highPixelDensityDisplays

Answer 3

も<img srcset>と-webkit-image-set CSS機能がありますが、彼らはサファリ/クローム/オペラでのみサポートされているように見えます。例：

<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)