正确使用测量单位？

Question

我一直在使用px几乎所有与测量相关的样式，但我想知道使用像素的最佳位置（px），百分比（%） ，分（pt）和em 我已经看到在排版中使用em和（我相信）points，但我不知道使用它们的最佳方法。

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

Answer 1

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

• em和en（and the new rem，更有趣的单位，例如ch）是字形相对单位，因此适用于文字样式，与根元素处的绝对单位对应（例如px处的body单位。 另一个有趣的用途：ex单位（字体中'x'字形的高度）设置与文本相关的垂直度量，ch以缩进行。

• px绝对渲染，因此可以根据这些单位，应用于容器或需要固定大小的各种小部件（按钮等）设计像素完美（或固定）布局。 免责声明：绝对是一种过度陈述，因为像素很少是绝对的，并且影响渲染结果的因素很多 - 请参阅this article about px as an angular measure。

• %主要与顶部容器中的绝对单位结合使用，并应用于各种CSS技术，例如以人造为中心的容器。这些单元对于本质上流畅的布局也非常方便。 其他人，例如视口相对vh，vw和vmin，无论父母的单位是什么都可以使用。

以上所有内容都是基于我的个人观点，因为这个主题可供讨论，CSS技术将不断发展，我们将看到更多使用我们从未想过的规范和功能。它主要是创造性地使用那些范围或有利于使用一个单位而非另一个单位的工具。

Answer 2

过去，这些区别很重要：例如，在IE6时代，您不应该使用px设置文本，因为它无法缩放。也就是说，在当天，浏览器实际上将px视为多个像素。

现在，浏览器已经符合网络现实：大多数人在任何地方都使用px。因此px is now defined as an angular measurement，这实际上意味着px在任何缩放设置和任何大小或DPI设备上都表现得很好。

同样，作为符合网络现实的一部分，所有其他单位都是按px定义的，所以除非碰巧对你的情况更方便，否则没有理由使用它们。唯一的例外是百分比，因为它们允许您指定与父母测量值相关的值。

详情from the spec：

• in，cm，mm，pt和pc都是相对于px 定义的，因为在实践中所有设备都遵循“对于CSS设备，这些尺寸是......锚定的...（ii）通过将像素单元与参考像素相关联。”如上所述，“参考像素“是一种角度测量，根据DPI设置，屏幕尺寸，缩放级别，设备类型等而变化。
• 1em等于元素的计算font-size ，通常在px中定义。如果该大小本身是在em s或ex中定义的，那么浏览器会向上看，直到找到px为相对，最终回落到默认font-size （通常是12px）。
如果可能，
• 1ex等于定义的font-size 中字母“x”的高度，但通常（？）会回退到0.5em。< / LI>

Answer 3

将px用于具有设定大小的元素。 当您需要元素与窗口大小或父元素大小成比例时使用百分比。

em是文本的标准，它根据mac上的屏幕大小进行调整。养成一个习惯，有很多关于为什么要使用em的好博客，em不仅仅用于字体属性，它还可以与div，输入等其他元素一起使用。使用px进行字体大小时可能会有后果，还有px和％将更理想的情况，它需要试用和错误完全理解。

根据所需的效果，没有真正的规则来使用它。在您创建时，您将以不同的分辨率测试您的网站，并调整浏览器大小，以便从各种用户的角度查看它的显示方式。

考虑跨浏览器兼容性＆amp;用em决议， 考虑使用百分比进行解决，

Answer 4

披露：我是系统管理员，而不是网页设计师。

我通常使用em来填充图像，以便根据文本远离图像来保持填充大小。

我有时使用%来处理液体/流体布局，尽管流体布局通常只是浏览器的100％但具有固定宽度（px）列。

我使用px来处理列宽，标题等。height标记的width和<img>属性默认情况下以像素为单位，并且如果您不要求浏览器从其原始/原始分辨率调整其大小，则图像将呈现最佳效果。在某些情况下，当字体必须使用图像（即“工具”一词旁边的扳手图标）时，您需要在字体上使用px。如果可能的话，我总是使用UTF-8字体而不是图像。