初心者のWEBデザイン

HTML,CSS、その他WEBデザインに関する事を記述していきます

20150411143621

CSS Retinaディスプレイで画像を綺麗に表示する

Apple製品にRetinaディスプレイは画像が綺麗に表示されます。


説明画像を用意しましたが簡単な仕組みとしては表示したい画像の倍のサイズの画像を
表示する画像のサイズにぎゅっと凝縮して表示するから綺麗に見えるのです。

f:id:bellsmarket:20150501180254p:plain

例えばiPhone4は解像度が640×960ピクセルです。
640×960ピクセルという解像度は「デバイスピクセル(dpx)」と呼び、
実際に画面上で表現される320×480ピクセルのサイズが
CSSピクセル(csspx)」と呼ばれています。


また、「デバイスピクセル」を「CSSピクセル」で割った数値を
「devicePixelRatio」と言います。

例 iPhone5は「デバイスピクセル(画面解像度)」が640px✕1136pxで、「CSSピクセル」が320px✕568pxなので「DevicePixelRatio」が2になります。


devicePixelRatio 1とdevicePixelRatio 2の異なる両方の解像度で
画像を綺麗に表示するために、メディアクエリを使いコントロールします。
その際に用いられるのが、「-webkit-device-pixel-ratio」です。

@media only screen and (-webkit-min-device-pixel-ratio: 2),
       (min--moz-device-pixel-ratio: 2),
       (-o-min-device-pixel-ratio: 2/1) {
#header {
  background-image: url(XXX.png);
}
}
topへ戻る