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

为了尽可能简洁的样式,我宁愿不使用包含双像素密度设备(如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;
}

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

解决方法

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

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

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