デバイスピクセルとcssピクセル
・デバイスピクセルは、物理的な実際のピクセル
・cssピクセルは、論理的な仮想のピクセル
下記、デバイスピクセルが2以上のデバイス用メディアクエリ
ブラウザ幅を指定することで、sp,pcに分けられる
中に指定するのは、高解像度用画像
|
1 2 3 4 5 6 7 8 |
media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) { background-image: url("header_hi_res.jpg"); background-size: 200px 50px; } |
cf
http://parashuto.com/rriver/development/pixel-related-info-for-coping-with-retina-displays
http://moshimoworks.com/2012/04/06/viewport-and-mediaqueries-on-smartphone/
