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

【问题标题】：using cm in responsive media queries?在响应式媒体查询中使用 cm？
【发布时间】：2013-12-16 09:15:35
【问题描述】：

我在我的 CSS 媒体查询中使用厘米来使我的模板具有响应性，而如今我们拥有非常高分辨率的智能手机，这使得像素过滤器变得困难。我的问题是，为什么所有网站都不使用 CM，这使得响应变得更加容易和实用？使用 cm 会不会遗漏什么我不知道的东西？

编辑：我使用min-**device**-width 作为媒体查询。

【问题讨论】：

为什么还要使用 cm？
因为如果我使用像素，那么例如分辨率为 1920x1080px 的 HTC One 会以桌面样式显示模板，而它是一个小屏幕的手机
我和你在一起@Payam。我无法理解 1cm 并不总是 1cm。我发现 REAL 单位是衡量屏幕上显示内容的最佳方式。 4 英寸手机徽标，1 厘米。27 英寸桌面徽标，3 厘米。期间。

【解决方案1】：

我也热衷于使用物理单位进行 CSS 测量，因为它很有意义，特别是用于设计在所有类型的设备上阅读长篇内容的体验。但这种方法的问题在于 1 CSS cm/in 与现实世界中的 1 cm/in 绝对不一样。只需尝试制作一个宽度和高度为 1cm 的框，然后测量在不同浏览器、屏幕和设备中的渲染。您可能会感到不快。

根本问题是所有（？大多数）设备都将物理单位渲染为（令人惊讶的）1in = 96px（或 1cm = ~37.8px）的方程。因此，如果您以厘米为单位定义单位或媒体查询，这实际上意味着您以大约 37.8 像素的比例定义它们，这在大多数情况下肯定不是您想要的。

【讨论】：

这是full chart of conversions

【解决方案2】：

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

official CSS3 Candidate Recommendations 之一定义了这些绝对长度：

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 是基于屏幕大小的。

您可以参考官方Media Queries documentation了解更多信息。

【讨论】：

是的，我忘了说我正在使用min-device-width，现在我在 HTC One 中显示了高分辨率的手机样式和一部低分辨率的旧智能手机。这怎么没有好处？
我觉得这篇文章可以让你对这类话题有所了解demosthenes.info/blog/775/Which-CSS-Measurements-To-Use-When

【解决方案3】：

这在 2018 年仍然是实际情况。我强烈建议您在布局中使用 rem、em。是的，它的尺寸因设备而异，但这就是它的美，因为您不应该决定“2cm 的徽标宽度是否足够？”请记住，用户可以手动增加字体大小，因为您的 2cm 决定还不够。
此外，测量 ems 中的文本块比 cms 中的文本块更直观，因为您回答了“一行应该有多少个符号”的问题。

【讨论】：

【解决方案4】：

我认为这很棒。即使厘米直接等同于像素（我不确定是否如此），它也更具可读性并且在使用它们时更有意义。我用过它们，但问题是，乍一看，浏览器的兼容性对于这些单元来说似乎不是很好。

【讨论】：