断点和图像

背景

小屏幕和大屏幕需要不同的布局。为了使用srcsetsizes,我们需要知道布局在什么时候改变。

Web开发人员必须决定在较小的屏幕上收缩、隐藏或重新定位什么内容,或者更常见的是,在较大的屏幕上扩展、揭示或添加什么内容。 然而,他们拥有的信息非常少。用户是在平板上、手机横屏模式还是小型浏览器窗口上?

我们必须选择一个任意的视口宽度,其中布局发生更改。这被称为断点。它是一个CSS像素的任意数量(不是设备像素)。Polypane有一篇很棒的文章 ,讲述了常用的断点。

一些图片(如标志、图标或按钮)可能会免于这些断点引起的布局移位(并且可以使用srcset密度描述符)。

主要内容图像将受到其容器大小的限制。通常,页面的主要内容区域在最大屏幕上会限制为某个宽度,即max-width,但在小屏幕上,主要内容区域将填满整个视口。

如果在某些断点上有多列,则计算有效的大小规则将变得更加困难,因为图片所占视口宽度的百分比将发生变化。

简单方法

话虽如此,不要过分思考。您可能对以下近似值非常满意:

  1. 主列(或图像容器)停止增长的尺寸是多少? 在此视口宽度范围内,我们可以使用100vw作为图像的sizes属性,表示该图像占用整个视口宽度的100%。
  2. 容器的最大宽度是多少? 我们可以将其设置为其余所有内容的固定width

例如,如果你的第一步答案是700像素,第二步答案是800像素,则可以使用以下sizes属性:

<!-- 这里的"px"指的是 CSS 像素,而不是设备像素或图像像素 -->
<img [...] sizes="(max-width: 700px) 100vw, 800px"  />

您可能认为浏览器可以根据CSS为我们很好地处理所有这些计算。不幸的是,浏览器过于热衷于在样式表下载之前优先选择图像URL。因此,我们必须自己进行计算,如果我们搞不清楚,那就该怪它们了。