我的 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"
但是,从技术上讲,在 min-width: 700px 下,图像现在小于 min-width: 380px 值,因为 700/2 = 350px 所以现在的顺序应该是:
sizes"(min-width: 380px) 380px, (min-width: 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"
(min-width: 700px) 50vw
永远不会被使用,因为浏览器在找到第一个有效的媒体查询时停止读取。
这里,以 800px
的视口(viewport)为例,min-width: 380px
为 true,因此它到此为止。
如果你想写更多mobile first,试试这个(使用max-width
):
sizes"(max-width: 380px) 100vw, (max-width: 700px) 380px, 50vw"
这是违反直觉的,因为我们使用 min-width
媒体查询编写移动优先 CSS。
HTH
关于html - 具有多个最小宽度 vw 和 px 值的 Srcset,哪个获胜,为什么?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40741705/