Question

因此，我再次发现自己将头发拉到响应图像上。 CMS为我提供了srcset，我通过将鼠标悬停在开发工具中的属性上来构建了简单的sizes属性I check the currentSrc –错误的Src！转到10，可能更改媒体条件，然后保存，重新加载，悬停，重复，直到可以正常工作为止。希望其他图片不会失败。

必须有更好的方法来做到这一点？考虑到Firefox在调试Webfonts方面仍然比Chrom *好，直到今天我才在Chrome的开发工具中找到添加设备像素比率，我想知道我是否忽略了某些内容。我知道并使用过占位符图像，但是设置起来很麻烦，而且无法告诉我

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

编辑：提出了这个示例，希望对您有所帮助：

<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" />

视口为650像素，设备像素比率为1。
DevTools告诉我：

currentSrc == "foo_b.jpg"

为什么？这是什么条件33vw最终是什么？ 650px*33/100？它与300w有何关系？距离768w越近？
请注意，我并不是真正在问这些特定值，而是一般的工作流程。

EDIT2：在这种情况下，我可能会要求开发工具功能（或扩展名）告诉我：

视口650像素
匹配((min-width: 600px) and (max-width: 1000px))
650px @ DPR 1.0 = 650w
=> 33vw = 650w * 33/100 = 214.5w
最近的src = foo_a.jpg 300w
但是，我有foo_b.jpg在缓存中
选择foo_b.jpg

Answer 1

size属性在语法上正确吗？

在您的情况下((min-width: 600px) and (max-width: 1000px))的外部括号似乎多余。

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

如果您知道设备的像素比率（DPR），则可以使用该值除以实际图像宽度（w中的srcset值）以获取将要在屏幕上占据图像的像素宽度。 / p>

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

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

sizes属性中的媒体查询与CSS媒体查询完全相同。因此，将首先应用 valid 媒体查询，即从左向右读取。有趣的事情是浏览器会这样做（至少是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)"; }
   }

在您进行第二次查询的情况下，我的短绒棉报无效格式，直到我删除了外部括号。这就是我对您的第一点的了解。

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

如何调试自适应图像的srcset和大小，例如适用哪种媒体条件？

1 个答案: