面试题：CSS响应式图片srcset与sizes属性的高级运用

Question

在一个复杂的响应式布局中，存在多种设备类型（手机竖屏、手机横屏、平板、桌面电脑），且每种设备类型对于图片的显示需求不同。同时，图片需要根据不同的网络环境（如2G、3G、4G、WiFi）加载不同质量的图片以平衡加载速度和图片质量。请详细阐述如何综合运用srcset和sizes属性来完成这个功能，并且给出关键代码示例（可重点说明逻辑和核心属性设置）。

Answer 1

1. srcset 和 sizes 属性介绍

• srcset：用于指定一系列图片资源及其对应的像素密度描述符（如 1x、2x）或宽度描述符（如 100w、200w），浏览器会根据设备像素比或视口宽度等因素选择最合适的图片资源进行加载。
• sizes：用于指定不同视口宽度下图片应该占据的布局宽度。它的值是一个逗号分隔的媒体查询和布局宽度的配对列表。浏览器会根据当前视口宽度，从 sizes 中找到匹配的媒体查询，并使用对应的布局宽度来从 srcset 中选择合适的图片。

2. 实现思路

1. 针对不同设备类型：通过 sizes 属性结合媒体查询，定义在不同设备视口宽度下图片的布局宽度。例如，手机竖屏时图片宽度可能为视口宽度的 100%，平板时可能根据布局为视口宽度的 50% 等。
2. 针对不同网络环境：在 srcset 属性中，根据不同网络环境下可接受的图片质量，提供不同质量的图片资源，并结合宽度描述符。例如，2G 网络下提供低质量、小尺寸图片，WiFi 下提供高质量、大尺寸图片。

3. 关键代码示例

<img 
  src="default.jpg" 
  srcset="
    small-2g.jpg 100w, 
    medium-3g.jpg 300w, 
    large-4g.jpg 800w, 
    high-wifi.jpg 1200w
  " 
  sizes="
    (max-width: 480px) 100vw, 
    (max-width: 768px) 50vw, 
    33vw
  " 
  alt="Responsive Image">

• srcset：
  • small - 2g.jpg 100w：表示 2G 网络下适合加载的图片，该图片的固有宽度为 100 像素。
  • medium - 3g.jpg 300w：3G 网络下适合加载的图片，固有宽度为 300 像素。
  • large - 4g.jpg 800w：4G 网络下适合加载的图片，固有宽度为 800 像素。
  • high - wifi.jpg 1200w：WiFi 网络下适合加载的图片，固有宽度为 1200 像素。
• sizes：
  • (max - width: 480px) 100vw：当视口宽度小于等于 480px（一般为手机竖屏）时，图片布局宽度为视口宽度的 100%。
  • (max - width: 768px) 50vw：当视口宽度小于等于 768px（一般为平板竖屏）且大于 480px 时，图片布局宽度为视口宽度的 50%。
  • 33vw：当视口宽度大于 768px（一般为桌面电脑或平板横屏）时，图片布局宽度为视口宽度的 33%。

通过上述 srcset 和 sizes 属性的设置，浏览器会综合设备类型和网络环境，选择最合适的图片进行加载，从而平衡加载速度和图片质量。