断点和图像
背景
小屏幕和大屏幕需要不同的布局。为了使用srcset和sizes，我们需要知道布局在什么时候改变。
Web开发人员必须决定在较小的屏幕上收缩、隐藏或重新定位什么内容，或者更常见的是，在较大的屏幕上扩展、揭示或添加什么内容。 然而，他们拥有的信息非常少。用户是在平板上、手机横屏模式还是小型浏览器窗口上？
我们必须选择一个任意的视口宽度，其中布局发生更改。这被称为断点。它是一个CSS像素的任意数量（不是设备像素）。Polypane有一篇很棒的文章 ，讲述了常用的断点。
一些图片（如标志、图标或按钮）可能会免于这些断点引起的布局移位（并且可以使用srcset密度描述符）。
主要内容图像将受到其容器大小的限制。通常，页面的主要内容区域在最大屏幕上会限制为某个宽度，即max-width，但在小屏幕上，主要内容区域将填满整个视口。
如果在某些断点上有多列，则计算有效的大小规则将变得更加困难，因为图片所占视口宽度的百分比将发生变化。
简单方法
话虽如此，不要过分思考。您可能对以下近似值非常满意：
- 主列（或图像容器）停止增长的尺寸是多少？ 在此视口宽度范围内，我们可以使用
100vw作为图像的sizes属性，表示该图像占用整个视口宽度的100%。 - 容器的最大宽度是多少？ 我们可以将其设置为其余所有内容的固定
width。
例如，如果你的第一步答案是700像素，第二步答案是800像素，则可以使用以下sizes属性：
<!-- 这里的"px"指的是 CSS 像素，而不是设备像素或图像像素 -->
<img [...] sizes="(max-width: 700px) 100vw, 800px" />您可能认为浏览器可以根据CSS为我们很好地处理所有这些计算。不幸的是，浏览器过于热衷于在样式表下载之前优先选择图像URL。因此，我们必须自己进行计算，如果我们搞不清楚，那就该怪它们了。