图像断点 srcset - 如何处理中等视口(viewport)尺寸中使用的较大图像？

Question

我一直在研究一个新的响应式网站设计，我有一个包含图像网格的图库，当浏览器视口(viewport)为 768px 或以上时，其跨度为 4 列宽(因此每个图像约为视口(viewport)的 25%)。任何 767 像素或更低的内容都只有 1 列宽(使其在较低分辨率下为全宽)。

• 桌面尺寸(超过 768 像素)的图像宽度应为 220 像素(4 个图像列)。
• 介于 480 像素和 767 像素之间，宽度最多应为 420 像素(1 个图像列)。
• 移动设备尺寸(479 像素以下)宽度不得超过 260 像素(1 个图像列)。

每个图像我都有三个来源。 220 像素、260 像素和 420 像素。

从上面可以看出，尺寸并不遵循视口(viewport)越小图像越小的正常惯例，所以我一直在研究和尝试各种选项。

根据建议，我一直在隐身模式下使用 Google Chrome，并在 Internet Explorer 中进行私密浏览，在加载页面之前浏览器视口(viewport)较小，等等...以确保我所做的任何更改都能得到更新.

我当前编写的代码是最接近其运行的代码，它遵循堆栈溢出上某人的查询(与我的类似)的答案。然而，当尝试实现它时，我似乎仍然无法让浏览器加载正确的图像，它总是加载更大的 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 不被理解，这将涵盖桌面和移动浏览器，并且只有中等大小的视口(viewport)(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"
/>

所以在我看来，我认为我列出的尺寸部分指出...如果视口(viewport)至少为 460 像素，则使用 420 像素图像，否则，如果视口(viewport)至少为 768 像素，则使用 260 像素图像。那么最后 100vm 意味着否则使用在全视口(viewport)宽度下最好的那个。我还将默认文件修改为 260px 文件，因为如果某些内容未被识别，这适合大多数视口(viewport)尺寸。

但是，上述编辑仍然仅加载 420px 图像。

如有任何建议，我们将不胜感激。即使只是为了纠正我的逻辑!

Answer 1

sizes 按从左到右的顺序计算。所以顺序很重要。如果视口(viewport)为 1000px，则第一个媒体条件 (min-width: 460px) 将匹配，因此选择大小 420px，其余的 >sizes 属性根本不被评估。

此外，单位应该是 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 实现在不理解描述符时才会选择第一项。