srcset 和 sizes 是指设备像素还是布局像素?
Do srcset and sizes refer to device pixels or layout pixels?
关于响应式图片的 <img srcset=".." sizes=".."/>
html 标签 + 属性的问题。
- 在 3x 视网膜显示器 (3 * 341 = 1023) 上,srcset 中的 w 描述符是指设备像素 (1023px) 还是 layout/css 像素 (341px)?
编辑:显然 w 描述符指定了图像分辨率,它与设备像素或 css 像素无关。
但问题是,浏览器如何选择提供的图像之一?基于设备像素,还是基于css像素?
- sizes 属性中的媒体查询是指设备像素还是布局像素?
- sizes 属性中的图像宽度 px 是指设备像素还是布局像素?
我自己的猜测是尺寸总是指布局像素。但如果能证实这一点,我会更愿意。
(理想情况下,我希望根据设备上的像素密度提供不同的 jpg 质量。Retina = 低质量,高分辨率。但这可能是一个单独的问题)
此处为完整场景:Responsive img/srcset/sizes: Different jpg quality depending on device pixel density?
编辑:当我说 "device pixels" 时,我的意思是设备上的物理像素。
But the question is, how does the browser pick one of the provided images? Based on device pixels, or based on css pixels?
这在技术上取决于实现,但想法是它应该基于设备像素;如果您的屏幕具有高像素密度,则需要更大的图像。如果放大,您可能还想要更大的图像。
Does the media query in the sizes attribute refer to device pixels or to layout pixels?
Do image width px in the sizes attribute refer to device pixels or to layout pixels?
这些都是 CSS 像素。
关于响应式图片的 <img srcset=".." sizes=".."/>
html 标签 + 属性的问题。
- 在 3x 视网膜显示器 (3 * 341 = 1023) 上,srcset 中的 w 描述符是指设备像素 (1023px) 还是 layout/css 像素 (341px)?
编辑:显然 w 描述符指定了图像分辨率,它与设备像素或 css 像素无关。
但问题是,浏览器如何选择提供的图像之一?基于设备像素,还是基于css像素? - sizes 属性中的媒体查询是指设备像素还是布局像素?
- sizes 属性中的图像宽度 px 是指设备像素还是布局像素?
我自己的猜测是尺寸总是指布局像素。但如果能证实这一点,我会更愿意。
(理想情况下,我希望根据设备上的像素密度提供不同的 jpg 质量。Retina = 低质量,高分辨率。但这可能是一个单独的问题)
此处为完整场景:Responsive img/srcset/sizes: Different jpg quality depending on device pixel density?
编辑:当我说 "device pixels" 时,我的意思是设备上的物理像素。
But the question is, how does the browser pick one of the provided images? Based on device pixels, or based on css pixels?
这在技术上取决于实现,但想法是它应该基于设备像素;如果您的屏幕具有高像素密度,则需要更大的图像。如果放大,您可能还想要更大的图像。
Does the media query in the sizes attribute refer to device pixels or to layout pixels? Do image width px in the sizes attribute refer to device pixels or to layout pixels?
这些都是 CSS 像素。