正在使用 css3“背景大小”；属性足以用于视网膜显示吗？
为了使样式尽可能简洁，如果使用双像素密度设备（例如 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;
}
这是否可以全面发挥作用而没有任何缺点？或者我应该对具有一定像素密度的设备进行某种媒体查询？
To be as succinct with styles as possible, I'd rather not use a media query stylesheet that is included if my page is viewed with a double-pixel-density device such as the iPhone 4.
That being said, would it be ok if I just did something like this?
.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;
}
Would this work across the board without any drawbacks? Or should I do some sort of a media query for devices with a certain pixel density?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
是的，会的。唯一的缺点是下载的图像远比非视网膜显示器上需要的图像大。我建议您在主样式表中的所有内容都使用非视网膜图像（为所有图像设置背景大小），并根据需要包含一个视网膜样式表，该样式表覆盖所有图像网址以及指向视网膜大小图像的链接。
这需要更多的工作，但是使用慢速蜂窝连接的人们会感谢您。
哦，你的方式也会为你降低图像的采样率，这可能会也可能不会。如果图像中有 1 像素宽的线条（例如），它可能不会以您满意的方式缩小尺寸。但对于大多数类型的图像来说，这可能是可以接受的。
Yes it would. The only drawback is downloading an image that is much larger than it needs to be on non-retina displays. I would recommend that you have non retina images for everything in the main stylesheet (with background size set for all images), and include a retina stylesheet as necessary that overrides all image urls with links to retina sized images.
It's a bit more work, but people on slow edge cellular connections will thank you.
Oh, and your way will also downsample your image for you, which may or not be ok. If you have 1px wide lines (for example) in the image, it may not downsize in a way that you find pleasing. But for most types of images, it will probably be acceptable.
要回答您的“针对具有特定像素密度的设备的媒体查询”，答案是肯定的：
media='only screen and (-webkit-min-device-pixel-ratio: 2)To answer your "media query for devices with certain pixel density", the answer is yes:
media='only screen and (-webkit-min-device-pixel-ratio: 2)除了 dmackerman 的帖子之外，要包含支持更高密度的非 webkit 浏览器的媒体查询，可以写：
或者
两者都产生相同的结果。
In addition to dmackerman's post, to include a media query for non-webkit browser supporting higher densities, one could write:
or
which are both producing the same outcome.