是否使用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

是的,它会的.唯一的缺点是下载的图像比非视网膜显示器上的图像要大得多.我建议您在主样式表中为所有图像设置非视网膜图像(为所有图像设置背景大小),并根据需要包含视网膜样式表,覆盖所有带有视网膜大小图像链接的图像网址.

这是一个更多的工作,但缓慢的蜂窝连接的人会感谢你.

哦,你的方式也将为你的图像下采样,这可能或不好.如果图像中有1px宽的线条(例如),它可能不会以您觉得令人满意的方式缩小尺寸.但对于大多数类型的图像,它可能是可以接受的.