针对高像素密度设备和低像素密度设备的CSS响应式设计？

Question

我对CSS像素以及它们是否转换为纯分辨率或设备的物理宽度有点困惑。 我的问题是，1080p 13英寸笔记本电脑上显示的内容是否与4k 13英寸笔记本电脑上的内容相同？或者一切都会缩小？

（我正在使用（max-width）/（min-width）媒体查询而不是（max-device-width）/（min-device-width） 如果你们能为我解决这个问题，我会很高兴的。

Answer 1

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

CSS使用“px”将“...像素单元与参考像素...”联系起来，因此单个CSS“px”可以将不止一个物理像素表示为不同的设备（即。 HD与4K）具有不同的像素密度。

CSS中的单个“px”应始终约1/96 英寸。您可能会看到基于浏览器渲染和/或监视器分辨率怪异的渲染变化。

Answer 2

对于大多数情况，台式机和笔记本电脑显示器将使用与CSS像素相同的像素分辨率。在这些情况下，4k 13＆＃34;没有缩放的笔记本电脑将以比1080p 13＆＃34;更小的物理尺寸显示更多内容。笔记本电脑。

尽管如此，在某些情况下这并非如此。使用移动设备，浏览器将使用缩小的分辨率，以便以更自然的物理尺寸渲染元素。这种缩放可以由devicePixelRatio确定 - 这是物理像素与CSS像素的比率。

进一步了解devicePixelRatio：https://www.quirksmode.org/blog/archives/2012/07/more_about_devi.html

有关移动设备尺寸的详细信息：https://mydevice.io/devices/