CSS：RetinaDisplay対応の画像 - Webデザインのこと、いろいろ

★高解像度ディスプレイで表示するために、２倍のサイズの画像を用意する
★googlechromeで検証する機能があり、端末を持っていなくても確認が可能

f:id:sankoblog:20160404005212p:plain
f:id:sankoblog:20160404005224p:plain

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>RetinaDisplay対応</title>
<link rel="stylesheet" href="retina01.css">
<meta name="viewport" content="width=device-width">  <!--★いるよ！！-->
</head>

<body>
<div id="box"></div>
</body>
</html>

@charset "utf-8";
/* CSS Document */
/*reset*/
html,body,h1,h2,h3,h4,ul,li,dl,dt,dd,p {
	margin: 0;
	padding: 0;
	line-height: 1.0;
	font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
	}
ul { list-style: none; }	
a { text-decoration: none; }
body {
	font-size: 16px;
	background: #FFF;
	}
img {
	border: none;
	vertical-align: bottom;
	}
/*----------------------------------*/
#box {
	width: 300px;
	height: 200px;
	background: url(img/300.png);
}
/*----------------------------------*/
/*pixel-ratio: 2  ピクセル比2:1のとき*/
/*(-webkit-min-device-pixel-ratio: 2)  →  Chrome / Safari用*/
/*(min-resolution: 2dppx)  →  FireFox用*/
/*IEにはぜんぜん対応してない*/
@media screen and (-webkit-min-device-pixel-ratio: 2),
       (min-resolution: 2dppx)  {
#box {
	background: url(img/retina600.png) no-repeat;
	background-size: cover;  /*#box内でのこと  100%でも同じ*/
}
}