2

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

  • 桌面尺寸（超过 768 像素）的图像应为 220 像素宽（4 列图像）。
  • 480 像素到 767 像素之间的宽度应最大为 420 像素（1 个图像列）。
  • 移动设备尺寸（小于 479 像素）应最大为 260 像素宽（1 个图像列）。

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

从上面可以看出，尺寸不遵循视口越小图像越小的正常约定，所以我一直在研究和尝试各种选择。

根据建议，我一直在隐身模式下使用谷歌浏览器，并且还使用 Internet Explorer 进行私密浏览，在加载页面之前浏览器视口很小，等等......以确保我所做的任何更改都得到更新。

我得到的当前代码是最接近我让它工作的代码，它在堆栈溢出时遵循某人的查询（类似于我的）的答案。但是，当尝试实现它时，我似乎仍然无法让浏览器加载正确的图像，它总是加载更大的 420 像素宽的图像。

我的代码目前是这样的：

<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 的图像。

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

4

1 回答 1

5

sizes从左到右进行评估。所以顺序很重要。如果视口为 1000 像素，则第一个媒体条件(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图像放在首位，因为具有部分-only实现的srcset旧 WebKit在它不理解描述符时会选择第一个项目。xsrcset

于 2016-03-02T12:23:17.263 回答