断点与图像
背景
小屏幕和大显示器需要不同的布局。为了srcset和sizes的目的，我们需要知道布局在什么时候发生变化。
Web 开发人员必须决定在较小的屏幕上要缩小、隐藏或重新定位的内容——或者更常见的是，在较大的屏幕上要扩展、显示或添加什么。他们可供利用的信息非常少。用户是在横屏模式下的平板电脑还是手机，或者是在小的浏览器窗口？
我们必须选择一个任意的视口宽度来改变布局。这称为断点。这是一个任意的 CSS 像素（不是设备像素）。Polypane 有一篇关于常用断点的很棒的文章。
一些图像（如徽标、图标或按钮）可能不会受到这些断点引起的布局变动的影响（并且适用于srcset 密度描述符）。
主要内容图像将受到其容器大小的限制。通常，页面的主要内容区域将在最大屏幕上限制到一定宽度，即max-width，但在小屏幕上，主要内容区域将填满整个视口。
如果您在某些断点上有多个列，计算有效的大小规则将变得更加困难，因为图像占据的视口宽度的百分比将会改变。
简便方法
也就是说，不要过多考虑。您可能会非常满意以下的近似：
- 主列（或图像的容器）在哪个尺寸不再增长？在达到该视口宽度之前，我们可以为图像的
sizes属性使用100vw，以表示图像占据视口宽度的100%。 - 该容器所达到的最大宽度是多少？我们可以将它设置为其他所有内容的固定
width。
如果您对问题1的答案是700px，对问题2的答案是800px，您可以使用以下sizes属性：
<!-- 这些是 CSS 像素，不是设备像素或图像像素。-->
<img [...] sizes="(max-width: 700px) 100vw, 800px" />您可能会认为浏览器可以根据 CSS 为我们很好地处理所有这些计算。不幸的是，浏览器在样式表下载之前就急切地选择了一个图像 URL。因此，我们必须自己进行计算，如果我们算得不完美，那也是他们应得的。