コンテンツ(img)の1pxを、実機上で何pxとして描画するかを示すもの。
ex)
/*@1x*/
.className {
width: 100px;
height: 100px;
background: url(
[email protected]);/* 等倍サイズの画像 */
}
/*@1_5x*/
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5) {
.className {
background: url(
[email protected]); /* 1.5倍サイズの画像 */
-webkit-background-size: 100px 100px; /* WebKit */
background-size: 100px 100px; /* WebKit以外 */
}
}
/*@2x*/
@media only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-device-pixel-ratio: 2) {
.className {
background: url(
[email protected]); /* 2倍サイズの画像 */
-webkit-background-size: 100px 100px; /* WebKit */
background-size: 100px 100px; /* WebKit以外 */
}
}
* * *
iPhoneでは、3Gまでで使ってたimgサイズを1倍とすると 4以降が2倍、
Androidでは機種によって違うが 概ね1.5倍
となっているため、こういった振り分けが非常に役立つ。
参考:
http://www.u-ziq.com/blog/2011/08/devicepixelratio.html
http://www.mdn.co.jp/di/articles/2434/?page=7
http://www.webcyou.com/?p=396
最終更新:2011年11月08日 15:14