图像断点srcset-如何处理在中间视口大小中使用的较大图像？

Question

我一直致力于一个新的响应式网站设计，我有一个包含图像网格的画廊，当浏览器视口为768px或以上时，它跨越4列宽（所以每个图像约为视口的25%）。任何767px或更低的东西只有1列宽（在较小的分辨率下使其全宽）。

• 桌面大小（超过768px）的图像应为220px宽（4个图像列）。
• 在480px和767px之间应为420px宽（1个图像列）。
• 和移动尺寸（低于479px）应高达260px宽（1图像列）。

我有三个来源，每个图像。220px、260px和420px。

从上面可以看出，大小不符合视口越小图像越小的正常惯例，因此我一直在研究和尝试各种选项。

根据建议，我一直在隐身模式下使用谷歌Chrome，也在私下浏览互联网浏览器，在加载页面之前浏览器视口开始变小，等等...以确保我所做的任何更改得到更新。

我现在看到的代码是最接近于使其工作的代码，它是在回答某人关于堆栈溢出的查询（类似于我的查询）之后编写的。然而，当尝试实现它时，我似乎无法让浏览器加载正确的图像，它总是加载更大的420px宽的图像。

我的代码目前是这样的：

<img sizes="(min-width: 767px) 420px, 100vm"
    srcset="images/thumbs/image_420.jpg 420w,    
            images/thumbs/image_260.jpg 260w,    
            images/thumbs/image_220.jpg 220w"    
       src="images/thumbs/image_220.jpg"
       alt="example image"
/>

在我谈这个问题的时候，还有第二个问题。在我的场景中，是否最好将默认的img src设置为260px映像？由于这将涵盖桌面和移动浏览器，如果srcset不被理解，只有中等大小的视口（460-767px）会受到影响。还是最好将默认图像设置为最小尺寸？

如果您有任何建议，我们将不胜感激，谢谢。

--编辑--

只是一个快速的更新，我想我昨天已经在逻辑上弄清楚了，但是它不起作用，所以我不确定我是否仍然理解计算的整个概念。我最新的编辑看起来是这样的：

<img sizes="(min-width: 460px) 420px, (min-width: 768px) 220px, 100vm"
    srcset="images/thumbs/image_420.jpg 420w,    
            images/thumbs/image_260.jpg 260w,    
            images/thumbs/image_220.jpg 220w"    
       src="images/thumbs/image_260.jpg"
       alt="example image"
/>

所以在我看来，我所列出的尺码部分。。。如果视口至少为460px，则使用420px图像；如果视口至少为768px，则使用260px图像。最后的100vm意味着在全视口宽度下使用最好的。我还将默认文件修改为260px文件，因为如果未识别某些内容，它适合大多数视口大小。

但是，上面的编辑仍然只加载420px图像。

任何建议将不胜感激。即使只是为了纠正我的逻辑！

Answer 1

大小从左到右求值。所以顺序很重要。如果视口为1000px，则第一个介质条件（最小宽度：460px）将匹配，因此选择大小420px，而不计算其余的size属性。

此外，单位应该是vw，而不是vm。

因此，它应该是：

<img sizes="(min-width: 768px) 220px, (min-width: 460px) 420px, 100vw"
     srcset="images/thumbs/image_420.jpg 420w,    
             images/thumbs/image_260.jpg 260w,    
             images/thumbs/image_220.jpg 220w"    
        src="images/thumbs/image_260.jpg"
        alt="example image"
/>

至于你的第二个查询，从技术上讲，你可以选择任何你喜欢的图像（即使是srcset中没有列出的图像），但是你的推理对我来说是有意义的。我唯一推荐的是将您选择的src映像放在srcset的第一位，因为旧的WebKit具有部分的x-只有srcset实现将在不理解描述符时选择第一项...