面试题：CSS中srcset与sizes属性在响应式图片中的中等应用

Question

假设你正在开发一个响应式网页，有一张展示产品的图片，在不同屏幕宽度下需要展示不同分辨率的图片以优化加载。屏幕宽度小于600px时，显示300px宽的图片；屏幕宽度在600px到1200px之间时，显示600px宽的图片；屏幕宽度大于1200px时，显示1200px宽的图片。请使用srcset和sizes属性来实现该需求，并写出HTML代码。

Answer 1

<img
  src="small.jpg"
  srcset="small.jpg 300w, medium.jpg 600w, large.jpg 1200w"
  sizes="(max-width: 600px) 300px, (max-width: 1200px) 600px, 1200px"
  alt="产品图片"
>

上述代码中，src 提供了一个基础的图片路径，在不支持 srcset 和 sizes 的浏览器中使用。srcset 列出了不同分辨率图片的路径及对应的像素密度描述符。sizes 根据不同屏幕宽度范围定义了图片应展示的宽度，浏览器会根据这些规则，在不同屏幕宽度下选择合适分辨率的图片进行加载。