1

关于<img srcset=".." sizes=".."/>响应式图像的 html 标记 + 属性的问题。

  • 在 3x 视网膜显示器 (3 * 341 = 1023) 上,srcset 中的 w 描述符是指设备像素 (1023px) 还是布局/css 像素 (341px)?
    编辑:显然 w 描述符指定了图像分辨率,这与设备像素或 css 像素无关。
    但问题是,浏览器如何选择提供的图像之一?基于设备像素,还是基于 css 像素?
  • size 属性中的媒体查询是指设备像素还是布局像素?
  • size 属性中的图像宽度 px 是指设备像素还是布局像素?

我自己的猜测是,尺寸总是指布局像素。但如果可以证实这一点,我会更喜欢。

(理想情况下,我希望根据设备上的像素密度提供不同的 jpg 质量。Retina = 低质量,高分辨率。但这可能是一个单独的问题)

此处的完整场景:响应式 img/srcset/sizes:不同的 jpg 质量取决于设备像素密度?

编辑:当我说“设备像素”时,我的意思是设备上的物理像素。

4

1 回答 1

2

但问题是,浏览器如何选择提供的图像之一?基于设备像素,还是基于 css 像素?

这在技术上取决于实现,但想法是它应该基于设备像素;如果您的屏幕具有高像素密度,则需要更大的图像。如果放大,您可能还需要更大的图像。

size 属性中的媒体查询是指设备像素还是布局像素?size 属性中的图像宽度 px 是指设备像素还是布局像素?

这些都是 CSS px。

于 2016-02-15T12:01:13.917 回答