CSS 中字体大小的CSS单位 [px em rem]

人生不是一种享乐，而是一桩十分沉重的工作。 ——<列夫·托尔斯泰>

作者：Ashish Lahoti
译者：cl9000
来源：https://codingnconcepts.com/css/font-size-units-px-em-and-rem/

在本教程中，我们将学习不同的单位来衡量CSS即字体大小px，em和rem，他们之间的分歧，以及何时使用哪一个。

默认字体大小

我们先来了解浏览器的字体大小首先这是区别一个关键的概念px，em和rem。

大多数浏览器都提供了从设置更改字体大小的功能。默认字体大小为16像素，用户可以随时根据自己的喜好进行更改，如下所示：

您可以通过以下方式使用CSS覆盖浏览器的默认字体大小设置：

1
2
3

html {
    font-size: 32px;
}

或者

1
2
3

html {
    font-size: 200%;
}

尽管不建议您覆盖浏览器的默认行为，否则它不会满足用户的偏好，这不是一个好主意。

PX

像素px是CSS中的绝对大小和固定大小的单位。
像素易于翻译。例如，使用下面的CSS，p（段落）元素的font-size将始终保留12px在所有设备和屏幕上，而不考虑更改浏览器的font-size设置或其任何父元素的font-size。

1

p { font-size: 12px; }

尽管在设备和屏幕上像素的大小并不总是相同的，但是这意味着width: 120px笔记本电脑上的像素块的实际宽度与iPad上的像素块的实际宽度并不相同。

px有什么问题？

当用户更改浏览器的默认字体大小并说要查看更大的字体大小时，就会出现问题。在这种情况下，p具有以上CSS的元素（段落）仍将显示为font-size: 12px绝对值。没有反映用户偏好，这不被认为是良好的用户体验。

何时使用px？

px对于固定的布局测量和固定的间距（填充，边距等），像素仍然是一个不错的选择，但对于灵活的布局和字体大小的测量来说，像素不是一个好的选择。

替代px？

em和rem是相对于px的相对(或柔性)单位，px是绝对(或固定)单位。em和rem都由浏览器转换为像素(px)值，这取决于浏览器的默认字体大小设置。比如，如果浏览器的默认字体大小是16px

1
2

1em = 16px;
1rem = 16px;

EM

em单元是相对于它的直接的或最近的父元素。
如果没有显式定义font-size，该元素将从父元素继承它。继承继续以这种方式在祖先之间发生，直到根元素。根元素的默认字体大小由浏览器提供。

何时使用em？

1.嵌套结构

我们可以使用em，你想应用相对于父元素的字体大小，如菜单结构。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

<style>
.menu-container {
  font-size: 100px;
  border: 1px solid black;
}
.menu-item {
  font-size: 0.5em;
  padding-left: 20px;
}
.menu-item::before {
  content: '▾'
}
</style>

<div id="container" class="menu-container">
  <div id="menu" class="menu-item">
    Menu
    <div id="submenu" class="menu-item">
      Submenu
      <div id="subsubmenu" class="menu-item">
        Subsubmenu
      </div>
      <div id="another_subsubmenu">
        Another Subsubmenu
      </div>
    </div>
  </div>
</div>

Output

我们看到，当我们进入嵌套的菜单结构级别时，字体大小正在减小，即使我们对所有嵌套的菜单项应用了相同的CSS类.menu-item。让我们分解浏览器是如何从rem相对值计算像素(px)。

• #menu项的 font-size: 0.5em 是相对于 #container的，所以像素的字号应该是 100x0.5 = 50px
• #submenu 项的font-size: 0.5em 是相对于 #menu，所以像素的字体大小是 50x0.5 = 25px
• #subsubmenu项的 font-size: 0.5em 相对于 #submenu，所以字号在像素上应该是 25x0.5 = 12.5px
• #another_subsubmenu 项的 class 和 font-size 没有定义，所以像素中的字号将与它的父类- #submenu 相同，即 25px

2. 媒体查询

em 应该用于定义媒体查询中的屏幕宽度。这里有一个有趣的帖子 - https://learnjavascript.today/，解释了为什么它们应该被用于媒体查询。

em有什么问题?

em 的主要问题是，您需要像我们所做的那样，对子元素的字体大小进行所有的数学计算。此外，如果想要对子元素应用特定的字体大小，则不能使用 em。

替代em？

rem 是解决我们问题的方法。它是一个相对的单元，不依赖于父元素。我们来看一下。

REM

rem单位相对于html(根)元素。

如果根html元素的字体大小是16px。

1
2
3

:root {
   font-size: 16px;
}

然后

1

1rem = 16px

对于所有元素。

如果未在根元素中明确定义字体大小，则 1rem 将等于浏览器提供的默认字体大小（通常为16px）。

何时使用rem？

建议在CSS中使用rem来表示间距(margin, padding等)和字体大小，因为它符合用户的偏好，并提供更好的用户体验。

root为16px时 px到rem

您可以使用下表从转换 px 到 rem, 当root font-size: 16px 时

您也可以使用像素rem转换器 计算 rem

总结

• 使用 px 作为固定大小的布局(width, height,等)或固定间距(margin, padding等)
• 使用 em 用于嵌套元素(tree, menu等)和媒体查询
• 使用 rem 来实现灵活的布局、间距和字体大小

Pixel to Rem 在线转换器

查看其它相关

• Pixel-to-Rem-在线转换器 - https://cl9000.github.io/2020/05/13/Pixel-to-Rem-在线转换器/

参考

• https://codingnconcepts.com/css/font-size-units-px-em-and-rem/

关注【公众号】，了解更多。

• Previous
  RGB to HEX 在线转换器
• Next
  Pixel to Rem 在线转换器

赏 支付宝打赏 微信打赏

赞赏一下 坚持原创技术分享，您的支持将鼓励我继续创作！