Skip to content

Latest commit

 

History

History
60 lines (47 loc) · 3.21 KB

使用 srcset 的响应式图像.md

File metadata and controls

60 lines (47 loc) · 3.21 KB
Raw

使用 srcset 的响应式图像

img 标签的 srcset 属性允许你根据你的喜好设置浏览器可以使用的响应图像，具体取决于像素密度或窗口宽度。通过这种方式，它只能下载渲染页面所需的资源，而不需要下载更大的图片（如果它是在移动设备上）。

下面是一个例子，我们为 4 种不同的屏幕尺寸提供了 4 个额外的图像:

<img
  src="avatar.png"
  alt="一张头像"
  srcset="
    avatar-500.png 500w,
    avatar-800.png 800w,
    avatar-1000.png 1000w,
    avatar-1400.png 1400w
  "
/>

在 srcset 中，我们使用 w 度量值来指示图像的宽度。

我们还需要使用 sizes 属性，它允许你为每个媒体条件列表指定图像的布局宽度：

<img
  src="avatar.png"
  alt="一张头像"
  sizes="(max-width: 500px) 100vw, (max-width: 900px) 50vw, 800px"
  srcset="
    avatar-500.png 500w,
    avatar-800.png 800w,
    avatar-1000.png 1000w,
    avatar-1400.png 1400w
  "
/>

在本例中，sizes 属性中的 (max-width: 500px) 100vw, (max-width: 900px) 50vw, 800px 字符串描述了图像相对于视口的大小，多个条件用逗号分隔。

媒体条件 max-width: 500px 设置与视口宽度相关的图像大小。简而言之，如果窗口大小为 < 500px，它将以 100% 的窗口大小渲染图像。

如果窗口大小较大但 < 900px，它将以窗口大小的 50% 渲染图像。

如果再大一些，它会渲染 800px 的图像。

vw 的测量单位表示，1vw 是窗口宽度的 1%，所以 100vw 是窗口宽度的 100%。

更多资料