html - 计量单位的正确使用？

Question

我一直在使用 px 来处理几乎所有与测量相关的样式，但我想知道使用像素 (px)、百分比 ( %)、点(pt)和em。
我见过 em 和(我相信)points 在排版中的使用，但我不知道使用它们的最佳方式。

应该在哪里使用，为什么？

Answer 1

• pt or cm, in, mm 等多用于打印样式表，因为它们最适合测量纸张的物理特性和打印机的渲染。

• em 和 en(and the new rem 以及更有趣的单位，例如 ch)是字形相对单位，并且作为这适用于文本样式，与根元素中的绝对单位相对应(例如 body 中的 px 单位)。 另一个有趣的用途:ex 单位(字体中“x”字形的高度)设置相对于文本的垂直度量，ch 用于缩进行。

• px 是绝对渲染的，因此可以基于这些单位设计像素完美(或固定)的布局，应用于容器或各种需要固定大小的小部件(按钮和喜欢)。 免责声明:绝对是一种夸大的说法，因为像素很少是绝对的，并且有很多因素会影响渲染结果 - 请参阅 this article about px as an angular measure .

• % 主要与顶部容器的绝对单元结合使用，并应用于各种 CSS 技术，例如假居中容器。这些单元对于自然流动的布局也非常方便。 其他的，比如视口(viewport)相关的 vh、vw 和 vmin，可以不考虑父级的单位而使用。

以上所有内容均基于我的个人观点，因为这个主题是开放式的辩论，CSS 技术将不断发展，我们将看到我们从未想过的规范和功能的更多用途。主要是对这些工具的创造性使用，这些工​​具限定或偏爱使用一个单元而不是另一个单元。