了解 srcset 宽度值
Understanding srcset width values
我试图了解 srcset 宽度值的工作原理，但我的基本示例让我失望。
鉴于下面的代码，我希望当视口大于 600 像素时显示大图像。然而，它实际上在 784px 处发生了变化。我不确定这是为什么。
<!-- image changes to large variant at 784px instead of the expected 1024px -->
<img
src="small.jpg"
srcset="small.jpg 600w,
large.jpg 1024w"
alt="A test image">
目前Chrome使用几何平均数在两个候选图像之间进行选择。所以它仍然使用 600 图像，因为 1024 太大，因此切换。
在即将发布的版本中，如果您使用的是低密度设备，Chrome 将始终切换到更高的图像。在其他设备上 Chrome 仍将使用中位数。
我试图了解 srcset 宽度值的工作原理，但我的基本示例让我失望。
鉴于下面的代码，我希望当视口大于 600 像素时显示大图像。然而，它实际上在 784px 处发生了变化。我不确定这是为什么。
<!-- image changes to large variant at 784px instead of the expected 1024px -->
<img
src="small.jpg"
srcset="small.jpg 600w,
large.jpg 1024w"
alt="A test image">
目前Chrome使用几何平均数在两个候选图像之间进行选择。所以它仍然使用 600 图像，因为 1024 太大，因此切换。
在即将发布的版本中，如果您使用的是低密度设备，Chrome 将始终切换到更高的图像。在其他设备上 Chrome 仍将使用中位数。