如何调试响应式图像的srcset和大小，如适用的媒体条件？

Question

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

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

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

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

<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最终是什么？ 650px*33/100？它与300w有什么关系？这怎么接近768w？ 请注意，我并没有真正询问这些具体的值，而是一般的工作流程。

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

1. Viewport 650px
2. 匹配((min-width: 600px) and (max-width: 1000px))
3. 650px @ DPR 1.0 = 650w
4. => 33vw = 650w * 33/100 = 214.5w
5. 最近的src = foo_a.jpg 300w
6. 但是，我在缓存中有foo_b.jpg
7. 选择foo_b.jpg

Answer 1

大小属性在语法上是否正确？

在你的情况下没有。 ((min-width: 600px) and (max-width: 1000px))上的外壳似乎是额外的。

浏览器认为图像在当前视口中有多少设备像素？那个“srcset w-pixel”有多少？

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

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

最重要的是：哪种媒体条件与当前视口匹配？为什么？

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

您可以通过在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/