I'm a bit confused about CSS pixels and whether they translate into pure resolution or physical width of devices. My question is, will content displayed on a 1080p 13 inch laptop be the same as content on a 4k 13 inch laptop? Or will everything be scaled down?
我有点搞不懂CSS像素，也搞不懂它们是转换成纯粹的分辨率还是设备的物理宽度。我的问题是，1080p 13英寸笔记本上显示的内容是否与4k 13英寸笔记本上显示的内容相同?还是一切都会缩减?
(I'm using (max-width)/(min-width) media queries and not (max-device-width)/(min-device-width) I'd be glad if you guys could clear this up for me.
(我用的是(max-width)/(min-width)媒体查询，而不是(max-device-width)/(min-device-width)如果你们能帮我清理一下，我会很高兴的。
2 个解决方案
#1
2
Yes, it should render the same.
是的，应该是一样的。
CSS uses “px” to relate “...the pixel unit to the reference pixel...”, thus a single CSS “px” could represent more than one physical pixel as different devices (ie. HD vs. 4K) have different pixel densities.
CSS使用“px”来关联……像素单元到参考像素…，因此，一个CSS“px”可以表示多个物理像素，作为不同的设备(例如。高清和4K)有不同的像素密度。
A single “px” in CSS should always be about 1/96 of an inch though. You may see variations in rendering based on browser rendering and/or monitor resolution quirks.
CSS中的一个“px”应该是1/96英寸。您可能会看到基于浏览器呈现和/或监视分辨率的不同呈现。
#2
1
For most cases, desktop and laptop displays will use the same pixels their resolution is set to for CSS pixels. In these cases, a 4k 13" laptop without scaling will display more content, at a smaller physical size, than a 1080p 13" laptop.
在大多数情况下，桌面显示器和笔记本电脑显示器将使用相同的像素，它们的分辨率设置为CSS像素。在这种情况下，没有缩放功能的4k 13“笔记本会比1080p 13”的笔记本显示更多的内容，而且尺寸更小。
That said, there are some cases where this isn't quite true. With mobile devices the browser will use a scaled down resolution so that elements are rendered at a more natural physical size. This scaling can be determined by the devicePixelRatio - which is the ratio of physical pixels to CSS pixels.
也就是说，在某些情况下，这并不完全正确。使用移动设备，浏览器将使用按比例缩小的分辨率，使元素以更自然的物理尺寸呈现。这种扩展可以由devicePixelRatio来决定——它是物理像素与CSS像素的比率。
Further reading about devicePixelRatio: https://www.quirksmode.org/blog/archives/2012/07/more_about_devi.html
进一步阅读devicePixelRatio: https://www.quirksmode.org/blog/archives/2012/07/more_about_devi.html
Details on sizes for mobile devices: https://mydevice.io/devices/
关于移动设备大小的详细信息:https://mydevice.io/devices/
#1
2
Yes, it should render the same.
是的，应该是一样的。
CSS uses “px” to relate “...the pixel unit to the reference pixel...”, thus a single CSS “px” could represent more than one physical pixel as different devices (ie. HD vs. 4K) have different pixel densities.
CSS使用“px”来关联……像素单元到参考像素…，因此，一个CSS“px”可以表示多个物理像素，作为不同的设备(例如。高清和4K)有不同的像素密度。
A single “px” in CSS should always be about 1/96 of an inch though. You may see variations in rendering based on browser rendering and/or monitor resolution quirks.
CSS中的一个“px”应该是1/96英寸。您可能会看到基于浏览器呈现和/或监视分辨率的不同呈现。
#2
1
For most cases, desktop and laptop displays will use the same pixels their resolution is set to for CSS pixels. In these cases, a 4k 13" laptop without scaling will display more content, at a smaller physical size, than a 1080p 13" laptop.
在大多数情况下，桌面显示器和笔记本电脑显示器将使用相同的像素，它们的分辨率设置为CSS像素。在这种情况下，没有缩放功能的4k 13“笔记本会比1080p 13”的笔记本显示更多的内容，而且尺寸更小。
That said, there are some cases where this isn't quite true. With mobile devices the browser will use a scaled down resolution so that elements are rendered at a more natural physical size. This scaling can be determined by the devicePixelRatio - which is the ratio of physical pixels to CSS pixels.
也就是说，在某些情况下，这并不完全正确。使用移动设备，浏览器将使用按比例缩小的分辨率，使元素以更自然的物理尺寸呈现。这种扩展可以由devicePixelRatio来决定——它是物理像素与CSS像素的比率。
Further reading about devicePixelRatio: https://www.quirksmode.org/blog/archives/2012/07/more_about_devi.html
进一步阅读devicePixelRatio: https://www.quirksmode.org/blog/archives/2012/07/more_about_devi.html
Details on sizes for mobile devices: https://mydevice.io/devices/
关于移动设备大小的详细信息:https://mydevice.io/devices/