Webデザインの勉強と製作 | あかとんぼ

フェリカテクニカルアカデミーの学習をベースに、Webについての勉強と製作の過程をまとめています。

[CSS][モバイル]Retina対応

Retinaディスプレイ対応

デバイスピクセルとCSSピクセル
  • デバイスピクセルとは…デバイス(端末)ごとのピクセル数
  • CSSピクセルとは…3.5インチの画面上で表現されるサイズ
  • CSSを記述する際は、基本的にCSSピクセルの数を基準に設計する
  • 「デバイスピクセル」を「CSSピクセル」で割った数値、倍率を「devicePixelRatio」という

f:id:akatonbo_web:20150807171408p:plain

f:id:akatonbo_web:20150807175523p:plain

(引用元: 高解像度ディスプレイへの対応 - WEBサイト制作の勉強)

imgを挿入する際のCSS記述

  • devicePixelRatioに応じた画像の解像度を用意すると、デバイスピクセルに等倍の美しい画像が表示できる
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Retinaディスプレイのメディアクエリー</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="box"></div>
</body>
</html>
/* 枠を設定 */
#box{
  width: 320px;
  height: 320px;
  background: url(img/bg01.png) no-repeat;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2),
       (min-resolution: 2dppx)  {
/*640*640の画像を320*320の枠内に貼り、100%に表示することでretina対応*/
#box{
  background: url(img/bg02.png) no-repeat;
  background-size: 100% 100%;
}