Question

图片元素得到广泛而迅速的传播（http://caniuse.com/#search=picture），我认为这是一种避免提供超大尺寸/不足尺寸图片的好方法，特别是当你想在100以上的手机和台式机上显示相同的图片时视口宽度的百分比。

这可以这样解决：

<img
    srcset="large.jpg  1920w, 
            medium.jpg  720w,
            small.jpg   360w"
    src="medium.jpg">

这允许浏览器聪明并决定加载哪张图片，但我发现这种方法存在问题：许多移动设备的像素密度为2或更高！因此，当显示360w时，如果我们希望图像看起来清晰，我们实际上需要中等图像。可以这样做：

＆＃13;

<picture>
   <source srcset="http://goo.gl/LsuU9t" media="(min-width: 720px)">
   <source srcset="http://goo.gl/LsuU9t" media="(min-width: 360px and min-resolution: 2dppx)">
   <img src="http://goo.gl/LsuU9t">
</picture>

＆＃13;

在我看来，这里的问题是，这可能会随着屏幕分辨率的增长而增长，并且我们失去了浏览器巧妙地决定最佳选择的好处。

所以，我的问题是两者之间是否有中间点，所以我仍然可以在html和css之间分开。

Answer 1

浏览器在选择图像时会考虑像素密度。因此，具有360 CSS px宽视口和2x像素密度的设备将选择medium.jpg。这正是w描述符和sizes属性旨在解决的问题！不要在这里使用picture。

另见https://ericportis.com/posts/2014/srcset-sizes/

如何在手机上使用图像元素来拍摄清晰的图像

1 个答案: