我一直在研究一种新的自适应网站设计，并且我有一个包含图像网格的画廊，当浏览器视口为768px或更高时，它跨越4列宽（因此，每个图像约占视口的25％）。767px或更低的任何值都只有1栏宽（使其在较低分辨率下变为全宽）。
每个图像都有三个来源。220px，260px和420px。
从上面可以看到，尺寸不遵循通常的惯例，视口越小，图像越小，因此我一直在研究并尝试各种选择。
遵循建议，我一直在以隐身模式使用Google Chrome，并且还私下浏览Internet Explorer，在加载页面之前，浏览器的视口开始很小，等等，以确保我进行的所有更改都得到更新。
我正在使用的当前代码是我最接近使其工作的代码，并且它在堆栈溢出时遵循某个人的查询（类似于我的）的答案。但是，当尝试实现它时，我似乎无法让浏览器仍然加载正确的图像，它总是加载较大的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图像。
任何建议将不胜感激。即使只是为了纠正我的逻辑！
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-onlysrcset实施将选择第一个项目时，它不理解的描述。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句