区别
CSS 中，目前我们常用到的长度单位有 px, em, rem。
-
绝对长度单位
px（pixel 像素）： 相对于显示设备而言的。对于低 dpi 设备，1px 是显示的一个设备像素(点)。对于打印机和高分辨率屏幕，1px 意味着多个设备像素。特点：
- 使用时间长， 而且比较直观。
-
相对长度单位
-
em： 相对于元素的字体大小.目前浏览器默认的字体大小是 16px
-
rem: 相对于根元素的字体大小
特点：
- rem 和 em 作为相对长度单位。他们的大小都不是固定的，会根据参照物的大小而动态变化。
- rem 相对 em 来说，计算的参照物只有一个：根元素（<html>），这样大大减小了计算成本。
比如说下面两个例子。分别计算出 grandson 的字体大小。
<div class="father">
father font size
<div class="child">
child font size
<div class="grandson">grandson font size</div>
</div>
</div>
用 em 的是1.2*1.2*1.2 = 1.728em = 1.728*16px算起来就比较麻烦。
.father {
font-size: 1.2em;
}
.child {
font-size: 1.2em;
}
.grandson {
font-size: 1.2em;
}
用 rem 的就直接是是1.2rem = 1.2*16px，相对比较直观一些。
.father {
font-size: 1.2rem;
}
.child {
font-size: 1.2rem;
}
.grandson {
font-size: 1.2rem;
}
适用场景
px:
- 目前，我们浏览器现在的缩放都是通过 zoom 缩放，而不是改变文本大小。缩放的时候，用 px 的字体也会跟着一起缩放。所以做一些不需要支持移动端的网站可以用 px.
- 如果需求给的设计稿上就要求详细的 px 长度。比如说一些 boreder，image, icon。
em, rem：
- 它们是专门为可伸缩布局创建的。有些人喜欢把手机上的默认字体调大，这时候，浏览器的默认字体也会跟着变大。
- 方便适配各种分辨率的设备。
网友评论