CSS中的各种单位

单位	解释
px	绝对单位，页面按照精确像素显示。
em	相对单位，基准点为父节点字体的大小，如果自身定义了font-size，则以自身字体大小来计算 。
rem	相对单位，可以理解为root em，根据页面根节点HTML的字体大小来计算。
vw	viewpoint width 视窗宽度，1vw等于视窗宽度的1%。
vh	viewpoint height 视窗高度，1wh等于视窗高度的1%。
vmin	vh和vw中较小的一个。
vmax	vh和vw中较大的一个。
%	百分比。
in	寸。
cm	厘米。
mm	毫米。
pt	point 大约1/72寸。
ex	取当前作用效果的字体的x字符的高度，在无法确定的情况下为0.5em。
ch	取当前作用效果的字体的0字符的高度，在无法确定的情况下为0.5em。

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

  .p1 {font-size: 16px; line-height: 32px;}
  .s1 {font-size: 2em;}
  .s2 {font-size: 2em; line-height: 2em;}

  .p2 {font-size: 16px; line-height: 2;}
  .s5 {font-size: 2em;}
  .s6 {font-size: 2em; line-height: 2em;}

    <div class="p1">
       <div class="s1">1</div>
       <div class="s2">1</div>
    </div>
    <div class="p2">
       <div class="s5">1</div>
       <div class="s6">1</div>
    </div>

//此时s1的字体大小为32px,行高由于自身没有设置，所以是从父元素继承，所以也是32px
//s2的字体大小为32px，行高设置为2em，因为自身有设置字体，所以行高是针对自身的字体高度，所以行高是64px

//s5的字体是32px，因为行高是继承而来的，即line-height:2;所以实际行高是32*2 = 64px
//s6的字体是32px,行高是2em，所以是2*32 = 64px。

rem布局原理

rem布局的本质是等比缩放，一般是基于宽度的。假设我们将屏幕宽度平均分成100份，每一份的宽度用x表示,即x=屏幕宽度/100，如果将x作为单位，x前面的数值就代表屏幕宽度的百分比。

如果想要页面元素随着屏幕宽度等比例变化，我们需要上面所讲的x单位，通过css中的rem，可以实现这个x。

如何让html字体大小一直等于屏幕宽度的百分之一呢？可以通过js来设置，一般需要在dom ready，resize和屏幕旋转中设置。

document.documentElement.style.fontSize = document.documentElement.clientWidth / 100 + 'px'; 

那么如何把UE图中获取的像素单位转化为以rem为单位的值？公式是（元素宽度/UE图宽度）*100.假设UE图尺寸是640px,UE图中的一个元素宽度是100px,根据公式（100/640）*100=15.625。