Rems、ems 和像素。 有什么不同？
已发表: 2015-12-30如果您打开任何网站样式表，您会遇到 rems、ems 或像素，或它们的任何组合。 在 CSS 样式中，这些是使用的主要测量单位。 无论您是从头开始设计网站，还是“继承”了需要维护的先前设计的网站，这些对于视觉设计中的排版、间距和其他大小都很重要。
是什么让一种计量单位比另一种更好？ 没有一个明确的答案，根据情况，一个可能比另一个更受欢迎。 了解用例以及最有效的方法将有助于确定适合您的样式的最佳测量方法。
像素
从网络的早期开始，像素就成为了随处可见的样式表中的一个选项。 它们是可靠的、精确的，它们的一致性是无法比拟的。 所有浏览器都支持像素，这使得它们易于使用。
尽管像素很棒，但它们确实有一些局限性。 因为它们是这样一个集合度量，所以用户无法在浏览器设置中更改默认浏览器文本的大小。 事情不会像使用 ems 和 rems 那样扩大规模，从用户可访问性的角度来看，很难改变大小。 有人可能会争辩说，用户可以放大，而不是进入浏览器设置。 没有一个正确或错误的答案，只是需要牢记。
这些是什么？
像素是基于集合大小的测量单位。 它们是在屏幕上测量尺寸的单位，在需要精确设计时使用。 我们说“像素分辨率”之类的东西，所以我们习惯了这种测量方式。
一个例子看起来像这样：
.main-header p {
font-size: 14px;
}
像素在网页设计中有其用途，但在与设备无关的网页设计时代，屏幕尺寸并不是主要关注点。 一切都是关于如何使我们的内容最适合无数设备，因此有 ems 和 rems 可以提供帮助。
EMS
这种计量单位有着悠久的历史。 它可以追溯到 1996 年，并且从 CSS 的早期就已经存在。 像素被认为是最佳实践，因此 em 在早期并不流行。 此后，它们受到欢迎，因为它们的目的是作为一个与特定内容中的字体大小相关的单位，并且有助于保持一致性。
这些是什么？
如果您热衷于经典排版，您可能会认出“em”，因为它是一种源自印刷字体世界的度量单位。 在排版中使用它作为一个单位，这个测量值等于当前指定的磅值。 例如，16 磅字体中的一个 em 是 16 磅。 对于给定磅值的所有字体，该单位都是相同的。
我们不是在这里谈论印刷，那么 ems 是如何融入网页设计的呢？ 相对大小是 ems 的一大卖点，因为它有助于控制与其他元素相关的元素的大小。 Ems 可以作为网站元素的重要组成部分，因为 em 值是复合的。 不过，真正了解这种复合是如何工作的很重要。
了解 ems
在大多数情况下，除非浏览器默认设置为其他值，否则 em 为 16 像素。 当你看到 1.5 em 时，它会变成 24 像素。 但这并不总是那么简单。 涉及嵌套时会发生什么？ 它既方便又令人困惑。 了解使用 em 时的工作原理肯定有助于解开任何谜团。 下面“我是嵌套的”段落的大小是多少？
<div class="one"> <div class="two"> <div class="three"> <p>I’m nested</p> </div> </div> </div>
.one, .two {
font-size: 0.5em;
}
.three {
font-size: 2em;
}
这里有 3 个 div，而且段落嵌套相当。 随着 DOM 的级联，您可能需要做一些侦探工作。 假设我们正在使用 16px 的 em，因为这是最常见的。
.one类是将 1em 乘以 0.5，即 0.5 em 或 8 px。 对于.two类，这再次乘以 0.5，即 0.25 em 或 4px。 事情变得越来越小，所以.three的类会有所帮助。 我们将取 0.25 em 并将其乘以 2。结果是 0.5 em 或 8px。
可能有帮助的一件事是在 HTML 元素上设置大小。 像这样的东西将指定设置的 em 大小，而不是依赖于浏览器设置的 em。 让我们将 1 em 设置为 20px。 如果将其与上面的示例一起使用，则将适用与嵌套相同的原则。 但请记住，我们已经指定了像素大小，因此这将影响使用浏览器设置选项缩放文本的能力。
html {
font-size: 20px;
}
除了像素，字体大小也可以设置百分比。 关键是 ems 可以与其他测量单位一起使用。 您肯定会遇到这种情况，因为将正文字体设置为百分比以帮助设置基线是很常见的。 假设字体大小从 em 大小的 62.5% 开始。 em 大小为 16px，字体大小为 10px。
body {
font-size:62.5%;
}
一旦你了解了，ems 可以成为你项目的一个很好的资产。 将子元素的文本调整到其父元素的大小当然可以派上用场。 此外，ems 可以很容易地在文本容器上指定比字间距更大的填充，使其遵循视觉邻近规则。 相关项目将在视觉上进行分组，减少混乱，并提供有组织的布局。
ems 的另一个重要特性是可访问性优势。 因为它是相对于 DOM 的根的，所以 ems 非常适合根据用户偏好调整整个设计的大小。 在浏览器首选项中，您可以轻松更改默认字体大小，然后将计算（以 em 为单位）更改为整个网站。
雷姆斯
这些是什么？
Rems 是对 CSS 时间线的一个相当新的补充。 这个度量单位是由 CSS3 引入的，它解决了像素和 em 的一些问题。 使用类似于“ems”的名称，您可能想知道“r”代表什么。 它来自“Root EM”一词。
根是 HTML 元素。 HTML 元素上指定的大小是此测量的基础。 您会看到我们在 HTML 元素上使用了 em 大小； 可以将两种测量类型结合起来。
html {
font-size: 1em;
}
.one {
font-size: 1.2rem; /* 1.2 x the value set in html */
}
现代浏览器支持 rems，但在提交 rems 之前，请务必与 BrowserStack 确认您需要支持哪些旧浏览器。 不过，不要让旧版浏览器阻碍您； 您始终可以为 IE9 以下的任何内容指定像素后备。 现代浏览器会忽略像素，因为它们更喜欢 rems。 它可能看起来像这样：
.my-text {
font-size: 24px;
font-size: 1.5rem;
}
了解 rems
还记得我们必须为 em 的嵌套元素做的数学运算吗？ 这对于 rems 是没有必要的。 这一切都基于该根元素。 我们不必担心父元素，它总是基于根。
<div class="one"> <div class="two"> <div class="three"> <p>I’m nested</p> </div> </div> </div>
html {
font-size: 1em;
}
.one, .two {
font-size: 0.52em;
}
.three {
font-size: 2rem;
}
这里有 3 个 div，并且段落是相当嵌套的，就像我们在 em 示例中看到的那样。 同样，假设我们正在使用 16px 的 em 大小。
.one和.two类分配了大小，但它们在这里并不重要，因为嵌套不会像 ems 那样受到 rems 的影响。 真正重要的是 .three 的样式，即 2 em。 该段落将基于 1em 的 HTML 元素。 这个测量值会加倍，给我们 2 rems 或 32 像素。
想要均匀地扩大一切吗？ 只需调整根元素大小。 这在调整浏览器默认大小时也很有帮助。 你可以看到 ems 是如何允许的，rems 也可以。
不用担心关于 rem 的不可预测的嵌套行为。 很容易理解根元素在哪里发挥作用，以及在使用 rems 时它如何影响您的样式。
在比较不同的测量值时，您可以看到它们各有优缺点。 真正了解测量单位的工作原理以及它们如何与浏览器设置一起工作，将帮助您选择最适合情况或项目的测量单位。