Question

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

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

每张图片都有三个来源。 220px，260px和420px。

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

根据建议，我一直在以隐身模式使用谷歌浏览器，并且还在浏览互联网资源管理器，浏览器视口在加载页面之前开始变小等等......以确保我所做的任何更改都得到更新

我接下来的当前代码是最接近我必须使其工作的代码，它是在堆栈溢出时跟踪某人的查询（类似于我的）的答案。但是，当试图实现它时，我似乎无法让浏览器加载正确的图像，它总是加载更大的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"
/>

所以在我看来，我认为我列出的尺寸部分说明......如果视口至少为460像素，则使用420像素图像，否则如果视口至少为768像素，则使用260像素图像。然后最后100vm意味着否则使用最佳视口宽度。我还将默认文件修改为260px文件，因为如果没有识别出某些内容，它会适合大多数视口大小。

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

任何建议都将非常感谢。即使只是为了纠正我的逻辑！

Answer 1

sizes从左到右进行评估。所以顺序很重要。如果视口为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实施当它不理解描述符时，将选择第一个项目。

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

1 个答案: