问：就图像加载时间和性能而言，哪种技术最有效……？
场景1。
是否通过使用媒体查询来加载不同尺寸的图像，如下：
/* Smartphone */
@media screen and (max-width: 320px) {
.img-page-1-img {
background: url('../images/img-page-1-img-117.jpg') no-repeat;
width: 117px;
height: 77px;
}
}
/* Desktop */
@media only screen and (min-width: 769px) {
.img-page-1-img {
background: url('../images/img-page-1-img-234.jpg') no-repeat;
width: 234px;
height: 154px;
}
}
OR...
场景2。
加载一张大图像并使用 CSS 通过设置 max-width 属性来“拉伸”和调整大小..？
img {
max-width: 100%;
}
谢谢....
也许，更合适和/或响应更快的方法是将两者结合起来。使用第二个img作为后备并使用媒体查询resolution指定图像：
img { ...low-res source }
@media (min-resolution: 2dppx) {
img { ...hi-res source }
}
理解高分辨率的代理可能会丢弃第一个请求并仅获取高分辨率图像；在最坏的情况下，将会有两个请求。其他人只会获取低分辨率源。
resolution目前处于W3候选人推荐 http://www.w3.org/TR/css3-values/#resolution
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
