レティナディスプレイ対応のcssの書き方
よく読まれている記事
最近Retina（レティナ）対応が増えてきましたので、書き方をまとめておきます。
cssでの分岐方法
@mediaを利用して、Retinaの時だけ読み込まれるcssで、styleを上書きする方法で対応します。|
1 2 3 4 5 6 7 8 9 10 |
@media screen and (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx), (min--moz-device-pixel-ratio: 2), (-o-min-device-pixel-ratio: 2/1) { /* ここの間にcssを書く */ } |
実際書いてみるサンプル
２倍のサイズの画像のファイル名ですが、いわゆる慣例にしたがって、@2x.pngのようなファイル名にしています。background-sizeを利用して、サイズを半分(表示されるサイズ）にしています。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
/* 通常の画像 */ .hoge { background: url(img/header.png) no-repeat; width: 800px; height: 200px; } @media screen and (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx), (min--moz-device-pixel-ratio: 2), (-o-min-device-pixel-ratio: 2/1) { /* レティナ対応の２倍の画像 */ .hoge { background: url(img/header@2x.png) no-repeat; background-size: 800px 200px; } } |
:before,:afterなどの擬似要素の場合
contentに対しては、background-sizeが効かないので、css3のtransformを利用して半分にします。|
1 2 3 4 5 6 7 8 9 10 11 |
.sidebody a:before { content: url("http://blog.livedoor.jp/jigokuno_misawa/designparts/pc/img/side_heart_icn@2x.png"); top: 6px; left: 11px; -moz-transform: scale(0.5,0.5); -webkit-transform: scale(0.5,0.5); -o-transform: scale(0.5,0.5); -ms-transform: scale(0.5,0.5); } |