在'srcset`中解釋`w`

Question

據我所知，srcset用於根據設備的dpi確定要加載哪個圖像。

<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"> 

幫助我瞭解什麼計量單位爲這樣的：我碰到的谷歌網絡基礎知識這個例子中，這似乎與vw單元這恰好是1％ofviewport寬度一起使用w單元來是和我如何使用它？

Answer 1

根據MDN的w是指：

的寬度的描述符，或直接跟着 'W' 的正整數。 寬度描述符除以大小 屬性中給出的源大小以計算有效像素密度。

另外，W3狀態：

用戶代理將從指定瓦特描述符和指定的渲染尺寸 在尺寸屬性計算每個圖像 的有效像素密度。然後它可以選擇任何給定的資源 ，具體取決於用戶的屏幕像素密度，縮放級別和可能的其他因素，如用戶的網絡條件。 如果用戶的屏幕寬度爲320 CSS像素，這相當於 指定wolf-400.jpg 1.25x，wolf-800.jpg 2.5x，wolf-1600.jpg 5x。另一方面，如果用戶的屏幕是1200像素的CSS像素寬度，這是 相當於指定wolf-400.jpg 0.33x，wolf-800.jpg 0.67x， wolf-1600.jpg 1.33x。通過使用w描述符和 屬性的大小，用戶代理可以選擇正確的圖像來源，無論用戶的設備多大，都可以下載到 。

W3頁面上的示例13提供了額外的細節。