Question

我将其用于新页面的移动版本（媒体查询）

grid = [data[x:x+cols][::-1] if i % 2 else data[x:x+cols] for i, x in enumerate(range(0, rows * cols, cols))]

到目前为止，在手机和DPR手机上都可以正常工作...

因此，下一步是添加平板电脑（768px）。

我认为应该可以这样：

<!-- CSS is img{width=100%;height:auto} -->
<img src="360x1.jpg" srcset="360x1.jpg 1x, 360x2.jpg 2x, 360x3.jpg 3x">

因此，这将结合DPR和设备宽度。将。：-）

我知道图片标签，但是我不确定这是否是正确的解决方案。我也知道大小属性，但是...

任何想法如何解决这个问题？谢谢！

Answer 1

从attribute descriptions到<img>：

混合宽度描述符和像素密度描述符是不正确的在相同的srcset属性中。

另外，关于将sizes属性与像素密度描述符一起使用：

如果srcset属性不存在，或不包含带有宽度的值（w）描述符，则sizes属性无效。

您可以将<img>与<picture>和source属性一起使用，并为每个设备尺寸使用media，并在srcset属性中包括像素密度描述符

<picture> 
   <source srcset="https://via.placeholder.com/50x50 1x,
                   https://via.placeholder.com/100x100 2x"
           media="(max-width: 767px)">
   <source srcset="https://via.placeholder.com/200x200 1x,
                   https://via.placeholder.com/400x400 2x">
   <img src="https://via.placeholder.com/100x100" alt="picture"> 
</picture>

将srcset用于不同的设备大小和分辨率

1 个答案: