详解CSS中的度量单位px|em|rem

作者: huip 发布时间: 2018-11-26

在前端开发过程中,我们将大量的时间都花在了页面布局开发上,在页面布局开发中我们又把很多的精力放在了如何处理网页中的排版问题,而其中最让我迷惑的是如何正确的使用px,em,rem这几个网页中常见的度量单位,相信这几个单位在开发过程中也困扰过你,到现在也还没有真正弄明白.

本篇文章我将介绍这几个度量单位的特性以及如何正确使用它们。

px

像素是静态的度量单位。它是一个跨平台的、跨浏览器的精确设置字体大小的方法。由于不同浏览器为实现相同的显示效果而使用了不同的渲染算法,所以最终给大家呈现出来显示效果可能会有微小的差异。

em

em是动态的度量单位。1em等于元素的父元素的字体大小,如果你在网页中任何位置都没有设置文字大小的话,那么1em将等于浏览器默认的文字大小,通常是16px。你可以通过以下的计算公式换算你想要的em值:

1
em = 希望得到的像素大小 / 父元素字体像素大小

例如,假设body的文字大小设为1em,且浏览器默认1em = 16px。如果你想得到12px,那你就可设定0.75em (12/16 = 0.75)。同样的,如果你想设定文字大小为10px,那就定义0.625em (10/16 = 0.625);若想要22px就定义1.375em (22/16 = 1.375)。

通常我们对10进制的转换体系比较熟悉,因此为了方便的使用em,我们通常会将body的字体大小设置为62.5%(16 x 62.5 = 10)。这样网页的基准单位就是10px了,我们能够快速的通过10进制来转换来计算出我们想要设置的字体大小了。

1
2
3
4
5
6
7
body {
font-size: 62.5%; /* 1em = 10px */
}

p {
font-size: 1.6em; /* 1.6em = 16px */
}

由于em可以自动适应用户的字体,em是一个非常有用的CSS单位

rem

rem是一个相对于html根节点的度量单位。由于rem和父节点无关,因此假设根节点的字体大小为16px,那么对于所有的页面元素来说 1rem = 16px。如果没有特殊指明根节点的字体大小,1rem就等于浏览器的默认字体大小(通常为16px)

同样的在使用rem过程中为了更直观的去计算rem和px的对应关系,我们通常在使用rem时也会将html的字体大小设置为62.5%

1
2
3
4
5
6
html {
font-size: 62.5% /* 1rem = 10px */;
}
body {
font-size: 1.6rem; /* 1.6rem = 16px */
}

总结

通过以上的介绍我们基本上对px,em,rem有了比较深入的了解,根据以上的总结我们得出以下各个单位的使用情况。

px:适用于有特定大小的资源比如图片

em:适用于局部的排版布局,比如设置局部的padding margin,border等

rem:适用于网页中父级资源的大小设置

下面写一段CSS简单的布局实例来具体说明这个问题

1
2
3
4
5
6
7
8
9
10
11
12
13
14
html {
font-size: 62.5%; /* 将页面的基础字体大小设置成为10px */
}

body {
font-size: 1.6rem; /*将页面正文的字体设置为16px*/
}

body h1 {
font-size: 2em; /*将页面中的p标点的字体大小设置为32px */
}
.gravator {
width: 32px; /* 将页面中的.gravator类的宽度设置为32px */
}

以上适用场景的定义不是绝对的,需要根据每个人的习惯来选择,总结出来一套自己的页面布局方案才是最好的。

如果你认为我的文章对你有帮助,欢迎点击上方按钮对我打赏

推荐阅读

详解Node.js Cluster(一)

国内外优秀的前端可视化框架推荐