具有多个最小宽度vw和px值的Srcset,它赢了,为什么?

时间:2016-11-22 12:19:12

标签: html css responsive-images srcset

我的sizes属性出现问题。前一段时间我问a question关于你应该宣布哪个订单大小和Yoav说:

"你的尺寸值应该从最窄的断点处开始,然后逐渐移动到更宽的断点,所以在你的情况下它应该是(最小宽度:62.5em)25vw,(最小宽度: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"

然而,技术上在最小宽度:700px时图像现在小于最小宽度:380px值,因为700/2 = 350px所以现在订单应该是:

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"

这是对的吗?

1 个答案:

答案 0 :(得分:5)

顺序取决于媒体查询值和“方向”(最小宽度或最大宽度)。图像的实际大小无关紧要。

在你的例子中:

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

这是违反直觉的,因为我们使用Bootstrap媒体查询编写移动优先CSS。

HTH