Question

在下面的代码中，源元素内的两个实例中提到了媒体查询条件 1-媒体属性
2-尺寸属性

<picture>
<source media="(max-width: 700px)" sizes="(max-width: 500px) 50vw, 10vw"
srcset="stick-figure-narrow.png 138w, stick-figure-hd-narrow.png 380w">

<source media="(max-width: 1400px)" sizes="(max-width: 1000px) 100vw, 50vw"
srcset="stick-figure.png 416w, stick-figure-hd.png 800w">

<img src="stick-original.png" alt="Human">
</picture>

我很好奇在所提到的两个实例中使用媒体查询条件的原因是什么，当它可以在一个实例中完成时（在媒体属性中）。这不是多余的吗？

Answer 1

我明白了！

第一步：媒体属性：我们做出选择

有两个不同的图像（艺术方向，如裁剪图像/不同方面比例）与media-condition属性中所述的每个media相关联。

第二步：尺寸属性：浏览器做出选择

在步骤1中，我们（而不是浏览器）选择特定图像，

现在我们进入第二步
- 我们发现有提供的变体相同的图像（具有不同分辨率的相同图像） srcset attribute
- srcset属性中提供了相同图像的变体，以便从
浏览器将根据sizes attribute中给出的媒体条件做出选择。
- 浏览器将决定并选择最适合的图片

结论

在步骤1中我们根据媒体条件决定图像在步骤2中浏览器在srcset属性中给出的选项中决定图像（我们在步骤1中选择的同一图像的不同变体）

与响应图像中的图像元素内的源元素混淆

1 个答案:

第一步：媒体属性：我们做出选择

第二步：尺寸属性：浏览器做出选择

结论