关于前端:px-em-rem-的区别和使用场景

区别

CSS 中，目前咱们罕用到的长度单位有 px, em, rem。

相对长度单位

px（pixel 像素）：绝对于显示设施而言的。对于低 dpi 设施，1px 是显示的一个设施像素(点)。对于打印机和高分辨率屏幕，1px 意味着多个设施像素。

特点：

• 应用工夫长，而且比拟直观。

绝对长度单位

1. em：绝对于元素的字体大小. 目前浏览器默认的字体大小是 16px

2. 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:

1. 目前，咱们浏览器当初的缩放都是通过 zoom 缩放，而不是扭转文本大小。缩放的时候，用 px 的字体也会跟着一起缩放。所以做一些不须要反对挪动端的网站能够用 px.
2. 如果需要给的设计稿上就要求具体的 px 长度。比如说一些 boreder，image, icon。

em, rem：

1. 它们是专门为可伸缩布局创立的。有些人喜爱把手机上的默认字体调大，这时候，浏览器的默认字体也会跟着变大。
2. 不便适配各种分辨率的设施。