CSS响应式设计适用于高像素密度和低像素密度设备吗？

Question

我有些困惑CSS像素是否转换为设备的物理宽度或纯分辨率。我的问题是，1080p 13英寸笔记本电脑上显示的内容是否与4k 13英寸笔记本电脑上的内容相同？还是所有内容都会缩小？我正在使用(max-width)/(min-width)媒体查询而不是(max-device-width)/(min-device-width)。如果您能为我解决这个问题，我会很高兴。

- HypOrg

Answer 1

是的，它应该呈现相同的效果。

CSS使用“px”来关联“...像素单位与参考像素...”，因此单个CSS“px”可以表示多个物理像素，因为不同设备（即高清和4K）具有不同的像素密度。

在CSS中，一个单独的“px”应该总是大约1/96英寸。您可能会看到基于浏览器渲染和/或监视器分辨率怪癖的渲染变化。

- user9183335

---

需要注意的一点是，1/96英寸的测量值是_CSS英寸_，它与实际英寸不同。这个英寸实际上是由显示器的像素密度决定的。对于原始问题来说，这并没有太大帮助，因为内容在这些显示器上实际上会有所不同。请参见：https://developer.mozilla.org/en-US/docs/Web/CSS/length#CSS_units_and_dots-per-inch - smashed-potatoes

Answer 2

对于大多数情况，桌面和笔记本电脑显示器将使用与其分辨率设置相同的像素作为CSS像素。在这些情况下，未经缩放的4k 13英寸笔记本电脑将以更小的物理尺寸显示更多内容，而1080p 13英寸笔记本电脑则不然。

也就是说，在某些情况下，这并不完全正确。对于移动设备，浏览器将使用缩小的分辨率，以便元素呈现为更自然的物理尺寸。此缩放可以通过devicePixelRatio来确定 - 它是物理像素与CSS像素的比率。

有关devicePixelRatio的更多信息，请参见：https://www.quirksmode.org/blog/archives/2012/07/more_about_devi.html 移动设备大小的详细信息：https://mydevice.io/devices/

- smashed-potatoes

---

谢谢你的回答。浏览器（例如Chrome）的缩放是否由Windows显示设置确定？ - HypOrg

通过 Windows 显示缩放，它会改变用于在屏幕上呈现逻辑像素的物理像素数量。这将影响浏览器中内容的显示方式，但浏览器本身不会直接感知到它。如果将其设置为 200%，则 1080 屏幕的高度只能看到 540 个 CSS 像素（每个逻辑/CSS 像素最终将使用 4 个物理像素，从而以更大的物理尺寸显示内容）。 - smashed-potatoes