srcset 和 size 是指设备像素还是布局像素？答案

【问题标题】：Do srcset and sizes refer to device pixels or layout pixels?srcset 和 size 是指设备像素还是布局像素？
【发布时间】：2016-05-12 05:48:37
【问题描述】：

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

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

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

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

编辑：当我说“设备像素”时，我实际上是指设备上的物理像素。

【问题讨论】：

TL;DR 版本只是忽略像素密度。只要您set the correct meta tag in your head，设备像素和 CSS 像素都无关紧要。
@MatthewRath 不太确定您的建议将走向何方，以及使用或不使用元标记会发生什么。我会等待更冗长的答案。
另见stackoverflow.com/a/31099581/246724
我不会费心解释。如果您懒得去参考的 google basics 链接并阅读元标记将设备像素和“布局像素”设置为 1:1 缩放，从而使您的问题是关于哪种像素不同宽度属性是基于冗余的你的问题。唯一不好做的事情是提供与responsive images 用例直接相关的 CSS 技巧的链接。
猜猜看……我的 CMS 或我的主题已经免费给了我元标记！所以是的，我想我也能从this blog post 得到它的作用。在写这个问题时，我假设这种行为已经是活跃的。我的错。

【解决方案1】：

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

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

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

这些都是 CSS px。

【讨论】：