Question

为了尽可能简洁风格，我宁愿不使用包含双像素密度设备（如iPhone 4）查看我的页面时所包含的媒体查询样式表。

话虽如此，如果我做了这样的事情会没关系吗？

.icon-1 {
  background-image: url('my-image-64px.png');  // This image is 64 x 64
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 32px 32px;
}

这是否可以全面运作而没有任何缺点？或者我应该为具有特定像素密度的设备进行某种媒体查询？

Answer 1

是的。唯一的缺点是下载的图像大于非视网膜显示器所需的图像。我建议您在主样式表中为所有内容设置非视网膜图像（背景大小设置为所有图像），并根据需要包含视网膜样式表，覆盖所有带有视网膜大小图像链接的图像网址

这是一项更多的工作，但处于缓慢边缘蜂窝连接的人会感谢你。

哦，你的方式也会为你的图像下采样，这可能是也可能没问题。如果图像中有1px宽的线条（例如），它可能不会以您觉得令人满意的方式缩小尺寸。但对于大多数类型的图像，它可能是可以接受的。

Answer 2

要回答“具有特定像素密度的设备的媒体查询”，答案是肯定的：

media='only screen and (-webkit-min-device-pixel-ratio: 2)

Answer 3

除了dmackerman的帖子，要包含支持更高密度的非webkit浏览器的媒体查询，可以写一下：

@media only screen and (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {

}

或

@media only screen and (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) {

}

两者都产生相同的结果。

是否使用css3'background-size'属性足以进行视网膜显示？

3 个答案: