html – 如何调试响应式图像的srcset和大小,哪些媒体条件适用？

2024年1月18日 210次阅读

我再一次发现自己把头发拉过响应的图像. CMS为我提供了srcset,我通过悬停在Dev Tools-错误的Src中的属性来构建一个simples sizes属性,
I check the currentSrc！转到10,可能更改媒体条件,保存,重新加载,悬停,重复直到它有点工作.希望它永远不会失败的其他图像.

必须有更好的方法来做到这一点？考虑到Firefox在调试Webfonts时仍然比Chrom *更好,而且直到今天我才发现在Chrome的Dev Tools中添加设备像素比率,我想知道我是否忽略了某些东西.我知道&使用占位符图像,但它们可能是一个痛苦的设置,他们无法告诉我

>大小属性在语法上是否正确？
>浏览器认为图像在当前视口中有多少设备像素？那个“srcset w-pixel”有多少？
>最重要的是：哪个媒体条件与当前视口匹配？为什么？

编辑：提出这个例子,希望它有所帮助：

<img
  src="foo.jpg"
  sizes="(max-width: 599px) 100vw, ((min-width: 600px) and (max-width: 1000px)) 33vw, 300px"
  srcset="foo_a.jpg 300w, foo_b.jpg 768w" />

视口在650px,设备像素比率为1.
DevTools告诉我：

currentSrc ==“foo_b.jpg”

为什么？这是什么条件？ 33vw到底是什么？ 650像素* 33/100→它与300w有什么关系？这怎么接近768w？
请注意,我并没有真正询问这些具体的值,而是一般的工作流程.

编辑2：我可能会要求一个Dev Tools功能(或扩展名)告诉我,在这种情况下：

> Viewport 650px
>匹配((最小宽度：600px)和(最大宽度：1000px))
> 650px @ DPR 1.0 = 650w
> => 33vw = 650w * 33/100 = 214.5w
>最近的src = foo_a.jpg 300w
>但是,我在缓存中有foo_b.jpg
>选择foo_b.jpg

最佳答案

is the sizes attribute syntactically correct?

在你的情况下没有.外壳((最小宽度：600px)和(最大宽度：1000px))似乎是额外的.

how many device pixels does the browser consider the image to be in the current viewport? How many “srcset w-pixels” is that?

如果您知道设备像素比率(DPR),则可以使用该值来划分实际图像宽度(srcset中的w值),以获得图像占据屏幕的像素宽度.

浏览器从您提供的srcset和sizes属性中了解这一点,并在决定使用哪个图像时将其考虑在内.

and most importantly: which media condition matches the current viewport? Why?

size属性中的媒体查询与CSS媒体查询完全相同.因此,首先应用有效的媒体查询,从左到右阅读.有趣的东西浏览器(至少Chrome),如果逗号集之间的一个查询无效,它将不会使整个大小属性,只是该查询无效.

您可以通过在CSS中应用这些相同的媒体查询集来测试这一点(请注意我使用的是Sass)：

body {
   @media (max-width: 599px) {
      &:before { content: "max-width: 599px"; }
   }
   @media (min-width: 600px) and (max-width: 1000px) {
      &:before { content: "(min-width: 600px) and (max-width: 1000px)"; }
   }

如果你的第二个查询,我的linter报告无效格式,直到我删除外部parens.这就是我对你的第一点的了解.

我的测试示例：https://codepen.io/teodragovic/pen/eXjPoz
好的参考文章：https://ericportis.com/posts/2014/srcset-sizes/

点赞