pat*_*zdb 3 html css srcset responsive-images
我的sizes属性一直都有问题.我刚才问过一个问题,你应该宣布哪个订单的尺寸和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"
它是否正确？
顺序取决于媒体查询值和"方向"(最小宽度或最大宽度).图像的实际大小无关紧要.
在你的例子中:
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