CSS:RetinaDisplay対応の画像
RetinaDisplay対応:完成版にリンク
★高解像度ディスプレイで表示するために、2倍のサイズの画像を用意する
★googlechromeで検証する機能があり、端末を持っていなくても確認が可能
<!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%でも同じ*/ } }