Html Srcset具有多个最小宽度vw和px值，哪个赢，为什么？

我的

大小属性一直有问题。我刚才问你应该在哪个订单上申报尺寸，Yoav说：

“尺寸值应该从最窄的断点开始，然后逐渐移动到更宽的断点，因此在您的情况下，它应该是（最小宽度：62.5em）25vw，（最小宽度：30em）50vw，100vw

否则，如果您在视网膜屏幕上，在确定要拾取哪个图像时，屏幕的DPR也会考虑在内。”

这是有道理的，但在这种情况下会发生什么呢。假设您在mobile上有一张100vw的图像，但容器上有
最大宽度：380px
。我会这样做：

size=“（最小宽度：380px）380px，100vw”

到目前为止和我在一起？酷。在700px时，布局更改为两列，因此您希望图像为50vw。所以我会这样做：

尺寸“（最小宽度：700px）50vw，（最小宽度：380px）380px，100vw”

但是，从技术上讲，在最小宽度：700px时，图像现在小于最小宽度：380px值，因为700/2=350px，所以现在的顺序应该是：

尺寸”（最小宽度：380px）380px，（最小宽度：700px）50vw，100vw“

然后在1024px时，布局更改为3列，在1200px时，外部容器阻止布局再扩展，因此我想要如下内容：

尺寸“（最小宽度：1220px）380px，（最小宽度：1024px）33vw，（最小宽度：700px）50vw，（最小宽度：380px）380px，100vw”

这是否正确？
顺序取决于媒体查询值和“方向”（最小宽度或最大宽度）。图像的实际大小无关紧要

在您的示例中：

sizes"(min-width: 380px) 380px, (min-width: 700px) 50vw, 100vw"

（最小宽度：700px）50vw
将永远不会被使用，因为浏览器在找到第一个有效的媒体查询时停止读取

这里，以
800px
视口为例，
minwidth:380px
为真，因此它停在那里

如果您想先编写更多的移动设备，请尝试以下操作（使用
max width
）：

这是违反直觉的，因为我们使用
minwidth
media查询编写mobile-first CSS

HTH
问题是：浏览器将使用它找到的第一个条件。所以它们不像常规css那样层叠。如果最后一个条件不是它找到的第一个条件，则不会读取它。换句话说，您必须编写与常规css相反的内容。@Stratboy如果我编写1100w、300w、500w、200w，顺序将无关紧要，因为浏览器将使用它找到的第一个条件，对吗？
sizes"(max-width: 380px) 100vw, (max-width: 700px) 380px, 50vw"