我了解到srcset用于根据设备的dpi确定要加载的图像。我在Google Web Fundamentals上看到了这个例子，它似乎使用了w单位和vw单位，恰好是视区宽度的1%：
<img src="lighthouse-200.jpg" sizes="50vw"
srcset="lighthouse-100.jpg 100w, lighthouse-200.jpg 200w,
lighthouse-400.jpg 400w, lighthouse-800.jpg 800w,
lighthouse-1000.jpg 1000w, lighthouse-1400.jpg 1400w,
lighthouse-1800.jpg 1800w" alt="a lighthouse">
帮助我了解这是什么度量单位，以及如何使用它？
最佳答案
根据MDN
一个宽度描述符，或一个正整数，后跟“w”。
宽度描述符除以大小中给定的源大小
属性计算有效像素密度。
此外，W3规定：
用户代理将计算每个
来自指定w描述符和指定渲染大小的图像
在“大小”属性中。然后它可以选择任何给定的资源
取决于用户屏幕的像素密度、缩放级别和
可能还有其他因素，比如用户的网络状况。
如果用户的屏幕宽度为320 css像素，则相当于
指定wolf-400.jpg 1.25x、wolf-800.jpg 2.5x、wolf-1600.jpg 5x.on
另一方面，如果用户的屏幕是1200 css像素宽，这是
相当于指定wolf-400.jpg 0.33x，wolf-800.jpg 0.67x，
wolf-1600.jpg 1.33x.通过使用w描述符和大小
属性，用户代理可以选择正确的图像源
无论用户的设备有多大，都可以下载。
W3页面上的示例13提供了其他详细信息。