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

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

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

工作有点多，但使用慢速边缘蜂窝连接的人会感谢你。

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