CSS 中的rem，em，vh，vw一次说清楚

　　关于css中的长度单位，我们用的最多就是px，因为他简单直接。但是当一套方案匹配不同终端时，px就会显得过于生硬，不容易变通。

　　然而rem，em，vh，vw就可以有效的解决这一问题。让我们来看看这些东西是个啥？

　　首先是rem，W3C官网描述是“font size of the root element”，即rem是相对于根元素。概念不好理解接咋们就直接直接看demo:

DOM结构如下：

CSS 代码如下：

效果如下：

　　

　     现在对于rem是否有了点认识，设置html的font-size大小后，就有了参照值，其他地方的px就可以替换成rem了，就像demo所展示的html的font-size大小为16px，div中的字体大写分别为1rem，1.5rem，2rem。换算成px就分别分 1* 16=16px，1.5*16=24px，2*16=32px。不仅仅是字体大小，html所有元素的宽高也可以写成rem为单位，同样是参照html的font-size的值。再扩展一下就是说所文档中所有的可以使用px表示的都可以替换成rem。

　　那么这么做的意义又是什么呢？当你需要做相应式布局时，rem就能发挥其正真的威力。通过匹配不同的设配的屏幕大小，设置其html的font-size的值，然后就可以放心大胆的使用rem，其他的就可以交给浏览器处理了。

em，vh，vw原理大同小异。不同的是参考点不一样，em参考的父节点的font-size的大小，即当父节点的fong-size为12px，子节点设置宽度为10em，font-size为2em，则宽度换算成px是12*10=120px，字体大小为12*2=24px，若孙节点的高度设置10em，那么换算成px又是多少呢？ 当然是父节点的fong-size值24px乘10em，结果为240px，所以em永远只关心上一级的font-size。那么问题来了，上一级没有设置font-size怎么办？不要慌，元素的font-size默认继承父节点的font-size值。这下是不是就对em了然于胸了。

　　接下来是vh和vw。看着简写你可能看不出什么东西。我们展开看看 vh:viewport height，vw:viewport width 。viewport叫做可视区域。这下是不是就感觉明白了vh和vw。没错就是你想的那样，vh和vw分别参照可视区域的高度和宽度。

　　所以这些单位都是相对的，只要知道参考点，那么就很简单了。目前我所做的项目中，都是统一使用的rem 做的适配，方便有效，谁用谁知道！

　　作为一个新人，欢迎大家指导批评。