7

为了使样式尽可能简洁，如果使用双像素密度设备（例如 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;
}

这会全面工作而没有任何缺点吗？或者我应该对具有特定像素密度的设备进行某种媒体查询？

4

3 回答 3

9

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

这需要做更多的工作，但使用慢速边缘蜂窝连接的人会感谢你的。

哦，你的方式也会为你下采样你的图像，这可能会也可能不会。如果图像中有 1px 宽的线条（例如），它可能不会以您喜欢的方式缩小。但对于大多数类型的图像，它可能是可以接受的。

于 2011-03-30T01:31:10.120 回答
3

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

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

于 2012-03-22T19:51:59.623 回答
2

除了 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) {

}

它们都产生相同的结果。

于 2013-03-28T08:42:29.227 回答