具有多个最小宽度 vw 和 px 值的 Srcset，哪个获胜，为什么？
Srcset with multiple min-width vw and px values, which wins and why?
我的 sizes 属性一直有问题。我刚才问 a question 你应该按照哪个顺序声明尺寸，Yoav 说：
“你的尺寸值应该从最窄的断点开始，然后逐渐移动到更宽的断点，所以在你的情况下它应该是 (min-width: 62.5em) 25vw, (min-width: 30em) 50vw , 100vw.
否则，如果您使用的是视网膜屏幕，则在确定要选择的图像时也会考虑屏幕的 DPR。"
这是有道理的，但是在这种情况下会发生什么。假设您有一张图像在移动设备上为 100vw，但容器上有 max-width: 380px。我会这样做：
sizes="(min-width: 380px) 380px, 100vw"
到现在为止？凉爽的。在 700px 布局变为两列，因此您希望图像为 50vw。所以我会这样做：
sizes"(min-width: 700px) 50vw, (min-width: 380px) 380px, 100vw"
但是，从技术上讲，最小宽度：700 像素的图像现在小于最小宽度：380 像素的值，因为 700 / 2 = 350 像素，所以现在的顺序应该是：
sizes"(min-width: 380px) 380px, (min-width: 700px) 50vw, 100vw" ?
然后在 1024px 时布局变为 3 列，在 1200px 时外部容器停止布局再扩展，所以我想要这样的东西：
sizes"(min-width: 1220px) 380px, (min-width: 1024px) 33vw, (min-width: 700px) 50vw, (min-width: 380px) 380px, 100vw"
这是正确的吗？
顺序取决于媒体查询值和 "direction"（最小宽度或最大宽度）。图片的实际大小无关紧要。
在你的例子中：
sizes"(min-width: 380px) 380px, (min-width: 700px) 50vw, 100vw"
(min-width: 700px) 50vw 将永远不会被使用，因为浏览器会在找到第一个有效的媒体查询时停止读取。
这里，以 800px 的视口为例，min-width: 380px 为真，所以就到此为止。
如果你想写更多移动优先，试试这个（max-width）：
sizes"(max-width: 380px) 100vw, (max-width: 700px) 380px, 50vw"
这是违反直觉的，因为我们先用 min-width 媒体查询编写移动 CSS。
HTH
我的 sizes 属性一直有问题。我刚才问 a question 你应该按照哪个顺序声明尺寸，Yoav 说：
“你的尺寸值应该从最窄的断点开始，然后逐渐移动到更宽的断点，所以在你的情况下它应该是 (min-width: 62.5em) 25vw, (min-width: 30em) 50vw , 100vw.
否则，如果您使用的是视网膜屏幕，则在确定要选择的图像时也会考虑屏幕的 DPR。"
这是有道理的，但是在这种情况下会发生什么。假设您有一张图像在移动设备上为 100vw，但容器上有 max-width: 380px。我会这样做：
sizes="(min-width: 380px) 380px, 100vw"
到现在为止？凉爽的。在 700px 布局变为两列，因此您希望图像为 50vw。所以我会这样做：
sizes"(min-width: 700px) 50vw, (min-width: 380px) 380px, 100vw"
但是，从技术上讲，最小宽度：700 像素的图像现在小于最小宽度：380 像素的值，因为 700 / 2 = 350 像素，所以现在的顺序应该是：
sizes"(min-width: 380px) 380px, (min-width: 700px) 50vw, 100vw" ?
然后在 1024px 时布局变为 3 列，在 1200px 时外部容器停止布局再扩展，所以我想要这样的东西：
sizes"(min-width: 1220px) 380px, (min-width: 1024px) 33vw, (min-width: 700px) 50vw, (min-width: 380px) 380px, 100vw"
这是正确的吗？
顺序取决于媒体查询值和 "direction"（最小宽度或最大宽度）。图片的实际大小无关紧要。
在你的例子中：
sizes"(min-width: 380px) 380px, (min-width: 700px) 50vw, 100vw"
(min-width: 700px) 50vw 将永远不会被使用，因为浏览器会在找到第一个有效的媒体查询时停止读取。
这里，以 800px 的视口为例，min-width: 380px 为真，所以就到此为止。
如果你想写更多移动优先，试试这个（max-width）：
sizes"(max-width: 380px) 100vw, (max-width: 700px) 380px, 50vw"
这是违反直觉的，因为我们先用 min-width 媒体查询编写移动 CSS。
HTH