HTML srcset 规范：澄清
HTML srcset Specification: Clarification
我已经写了一个 JavaScript 填充器来实现 srcset，但我需要澄清指定的行为。
虽然 srcset 允许您指定宽度或分辨率的条件，但我不知道是否可以指定两者。例如：
<img src="images/oh1x408.jpg"
srcset="images/oh1x192.jpg, images/oh1x408.jpg 420w,
images/oh2x192.jpg 2x, images/oh2x408.jpg 2x 420w">
这应该涵盖单分辨率和双分辨率，以及更小和更宽的屏幕。
我没见过同时指定宽度和分辨率的示例。问题是：
- 上面
srcset 示例中的最后一张图片是否符合规格？
- 示例中还有什么地方不正确吗？
谢谢
不，两者都是不允许的。 srcset spec表示该属性由图像候选字符串组成，以逗号分隔，并且每个这样的字符串具有
Zero or one of the following:
A width descriptor, consisting of: a space character, a valid non-negative integer giving a number greater than zero representing
the width descriptor value, and a U+0077 LATIN SMALL LETTER W
character.
A pixel density descriptor, consisting of: a space character, a valid floating-point number giving a number greater than zero
representing the pixel density descriptor value, and a U+0078 LATIN
SMALL LETTER X character
不可以，您只能指定两者之一。看来，您不了解宽度描述符的工作原理。一旦使用宽度描述符，就不再需要 x 描述符了。
这是一个例子：
<img srcset="img-300.jpg 1x, img-600.jpg 2x" />
上面的例子也可以用宽度描述符来描述，看起来像这样：
<img srcset="img-300.jpg 300w, img-600.jpg 600w" sizes="300px" />
srcset 是关于分辨率切换的（没有艺术指导）。虽然密度描述符只能处理静态宽度图像，但宽度描述符还可以使用 sizes 属性处理自适应图像。宽度描述符以物理像素描述每个候选图像的宽度，大小属性以布局像素描述图像的（不同）宽度。
这是一个更复杂的例子：
<img srcset="img-300.jpg 300w, img-480.jpg 480w, img-720.jpg 720w" sizes="(min-width: 480px) 400px, 100vw" />
上面的例子说我们有 3 个候选者，一个宽度为 300，另一个宽度为 480，最后一个宽度为 720 像素，此外，如果视口为 min-width: 480px，图像将以 400 像素显示，否则它以全视口宽度 (100vw) 显示。
然后浏览器会根据您的尺寸属性自动计算宽度。例如，如果您正在查看 360 像素宽的设备，则采用 100vw 尺寸（因为它比 480 像素低）并计算为 360 像素布局像素。然后浏览器通过划分计算每个候选的密度：宽度描述符/计算的大小）：
300 / 360 = 0.83
480 / 360 = 1.34
720 / 360 = 2
然后浏览器根据您设备的像素比选择最适合设备的候选者。因此它在 1x 设备上使用 480 宽图像，在 2x 设备上使用 720 宽图像。
如您所见，您不再需要使用密度描述符。密度描述符只是一个较短的版本。
是的，已经有一个 polyfill 可以很好地处理这个问题。
我已经写了一个 JavaScript 填充器来实现 srcset，但我需要澄清指定的行为。
虽然 srcset 允许您指定宽度或分辨率的条件，但我不知道是否可以指定两者。例如：
<img src="images/oh1x408.jpg"
srcset="images/oh1x192.jpg, images/oh1x408.jpg 420w,
images/oh2x192.jpg 2x, images/oh2x408.jpg 2x 420w">
这应该涵盖单分辨率和双分辨率，以及更小和更宽的屏幕。
我没见过同时指定宽度和分辨率的示例。问题是：
- 上面
srcset示例中的最后一张图片是否符合规格？ - 示例中还有什么地方不正确吗？
谢谢
不，两者都是不允许的。 srcset spec表示该属性由图像候选字符串组成，以逗号分隔，并且每个这样的字符串具有
Zero or one of the following:
A width descriptor, consisting of: a space character, a valid non-negative integer giving a number greater than zero representing the width descriptor value, and a U+0077 LATIN SMALL LETTER W character.
A pixel density descriptor, consisting of: a space character, a valid floating-point number giving a number greater than zero representing the pixel density descriptor value, and a U+0078 LATIN SMALL LETTER X character
不可以，您只能指定两者之一。看来，您不了解宽度描述符的工作原理。一旦使用宽度描述符，就不再需要 x 描述符了。
这是一个例子：
<img srcset="img-300.jpg 1x, img-600.jpg 2x" />
上面的例子也可以用宽度描述符来描述，看起来像这样：
<img srcset="img-300.jpg 300w, img-600.jpg 600w" sizes="300px" />
srcset 是关于分辨率切换的（没有艺术指导）。虽然密度描述符只能处理静态宽度图像，但宽度描述符还可以使用 sizes 属性处理自适应图像。宽度描述符以物理像素描述每个候选图像的宽度，大小属性以布局像素描述图像的（不同）宽度。
这是一个更复杂的例子：
<img srcset="img-300.jpg 300w, img-480.jpg 480w, img-720.jpg 720w" sizes="(min-width: 480px) 400px, 100vw" />
上面的例子说我们有 3 个候选者，一个宽度为 300，另一个宽度为 480，最后一个宽度为 720 像素，此外，如果视口为 min-width: 480px，图像将以 400 像素显示，否则它以全视口宽度 (100vw) 显示。
然后浏览器会根据您的尺寸属性自动计算宽度。例如，如果您正在查看 360 像素宽的设备，则采用 100vw 尺寸（因为它比 480 像素低）并计算为 360 像素布局像素。然后浏览器通过划分计算每个候选的密度：宽度描述符/计算的大小）：
300 / 360 = 0.83
480 / 360 = 1.34
720 / 360 = 2
然后浏览器根据您设备的像素比选择最适合设备的候选者。因此它在 1x 设备上使用 480 宽图像，在 2x 设备上使用 720 宽图像。
如您所见，您不再需要使用密度描述符。密度描述符只是一个较短的版本。
是的，已经有一个 polyfill 可以很好地处理这个问题。