在响应式媒体查询中使用cm？

Question

我在我的CSS媒体查询中使用厘米来使我的模板响应,而现在我们的智能手机具有非常高的分辨率,使像素过滤器变得困难.我的问题是,为什么所有网站都不使用CM,这使得响应更加简单和实用？使用我不知道的cm有什么可以错过的吗？

编辑:我正在使用min-**device**-width媒体查询.

Answer 1

我也一直热衷于使用物理单位进行CSS测量,因为它非常有意义,特别是在所有类型的设备上设计长形式内容的阅读体验.但是这种方法的问题在于1 CSS cm/in与现实世界中的1 cm/in完全不同.只需尝试制作宽度和高度为1cm的盒子,然后在不同的浏览器,屏幕和设备上测量渲染.你可能会感到非常惊讶.

基本问题是所有(最好的)设备都将物理单位渲染为(惊讶)1in = 96px(或1cm = ~37.8px)的等式.因此,如果您以cm为单位定义单位或媒体查询,这实际上意味着您以~37.8像素比率定义它们,这在大多数情况下肯定不是您想要的.

Answer 2

使用 cm 而不是 px 确实没有任何好处。

其中的官方CSS3候选人的建议定义了这些绝对长度：

unit    definition
‘cm’    centimeters
‘mm’    millimeters
‘in’    inches; 1in is equal to 2.54cm
‘px’    pixels; 1px is equal to 1/96th of 1in
‘pt’    points; 1pt is equal to 1/72nd of 1in
‘pc’    picas; 1pc is equal to 12pt

因此 1cm 大约等于 37.80px。如果设备的屏幕宽度为 10 厘米，那么以像素为单位大约为 378 像素。

请注意我是如何说“设备宽度”的。媒体查询支持 2 种不同的宽度和高度查询：min-width并且min-height基于屏幕的分辨率；min-device-width并且min-device-height基于屏幕的大小。

您可以参考官方媒体查询文档了解更多信息。