css中rem，em，px的区别和使用场景

一、前言

我们h5项目终端适配采用的是淘宝那套《Flexible实现手淘H5页面的终端适配》方案。主要原理是rem布局。最近和别人谈弹性布局原理，发现虽然已经使用了那套方案很久，但是自己对rem的理解很含糊， 包括vw、vh等。所以打算写博客总结一下，以加深理解。

二、几个概念

这里就不讲那些，物理像素、设备像素比了，可以自己查阅。要去理解rem/em/vm/vh等，首先要直观的去理解他们到底是什么？理解好了，后面就好办了。其实这几个都是css单位，就像我们常用的px一样，只不过他们都是相对单位。我平时使用的百分比单位如：width:100%;就是相对单位。

1.em

em作为font-size的单位时，其代表父元素的字体大小，em作为其他属性单位时，代表自身字体大小——MDN

比如父元素font-size:12px;

自身元素如果写成：font-sise:2em;则自身元素用px表示就是24px（相对父元素字体大小）;

但是自身元素设置：width:2rem,那么自身元素用px表示就是48px（相对自身字体大小）；

2.rem

rem作用于非根元素时，相对于根元素字体大小；rem作用于根元素字体大小时，相对于其出初始字体大小——MDN

比如根元素（html）设置font-size=12px; 非根元素设置width:2rem;则换成px表示就是24px；

如果根元素设置成font-size=1rem;则根元素换成px就是相对于初始字体大小，一般是12px；

3.vm/vh

vw ：视口宽度的 1/100；vh ：视口高度的 1/100 —— MDN

在pc端，视口宽高就是浏览器得宽高；

在移动端，这个还不太一样，不过一般设置：

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

代码以显示网页的屏幕宽度定义了视窗宽度。网页的比例和最大比例被设置为100%。

三、剖析rem布局原理

其实好好理解上面的概念，rem的原理也就很简单了。

假设我们将屏幕平局分为10份，每一份宽度用一个a表示，即a=屏幕宽度/10;那么：

div{
   width: 5a} /* 屏幕宽度的50% */

但是css中没有a这个单位啊？那怎么办呢？对，css不是有相对单位rem么？我们全可以实现借助rem代替上面的a。如：

html {
   font-size: 12px}
div {
   width: 2rem}