CSS中的单位px、em、rem、%、vw、vh、vm
px
相对长度单位，像素px 是相对于显示器屏幕分辨率而言的。是我们网页设计常用的单位，也是基本单位。
通过 px 可以设置固定的布局或者元素大小，缺点是没有弹性。用 px 设置字体大小时，比较稳定和精确。但是这种方法存在一个问题，当用户在浏览 Web 页面时，如果改变了浏览器的缩放，这时会使得 Web 页面布局被打破。
em
相对长度单位，相对于当前对象内文本的字体大小，相对于其父元素的 font-size 而计算的。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。也就是说，进行任何元素设置，都有可能需要知道他父元素的大小。
特点：1. em的值并不是固定的； 2. em会继承父级元素的字体大小。
注意：谷歌浏览器强制最小字体为 12px，即使设置成 10px 最终都会显示成 12px，当把 html 的 font-size 设置成 10px，子节点 rem 的计算还是以 12px 为基准。例如:
<body>
<div class=”div1”>div1
<div class=”div2”>
div2
<div class=”div3”>div3</div>
</div>
</div>
</body>
css：.div1 { font-size: 1.5rem; }，则计算关系为：
body 的 font-size 继承自根元素 html，即浏览器默认尺寸 16px，未经调整的浏览器都符合 1em = 16px，
div1 的 font-size = 1.5 * 16px = 24px
div2 的 font-size= 1.5 * 24px = 36px
如果设置 div2 的 font-size = 40px，则 div3 的 font-size = 1.5 * 40px = 60px
如果 div1 不定义基准大小，则下面 div2 将继承原本的默认值 1em = 16px，这样换算单位会很麻烦，但若每一个父级元素都设置基准大小，平白地增加了无穷的代码编辑烦恼。
为了简化 font-size 的换算，需要在 css 中的 body 选择器中声明 font-size = 62.5%，这就使 em 的值变为 16px * 62.5% = 10px，这样 12px = 1.2em，10px = 1em，也就是只需将原来的 px 数值除以10，然后换上 em 作为单位就行了。
注：在body里面注明 font-size: 62.5%;
1. 之后可以将 em 当 px 使用，然后 x10 就好，但前提是父级标签里面没设定 font-size；
2. 一旦父级元素有设定字体大小, em 前面数值 x 就相当于父级元素字体乘以 x%；
3. 相对最临近父级元素，且可以一直往下叠加。
大家可以查看这个弹性布局样例 The Incredible Em & Elastic Layouts with CSS 此时你使用浏览器的UI控件改变了文字的大小或者直接“ctrl + ”和“ctrl - ”，会发现这个弹性布局实例，在浏览器改变字体大小会做出相应的放大和缩小，并不会影响整个页面的布局。
总结：
* 浏览器的默认字体是 16px；
* 元素自身没有设置字体大小时，元素的width、height、line-height、margin、padding、border等值转换都按下面公式转换：1 ÷ 父元素的 font-size × 需要转换的像素值 = em 值；
* 元素自身设置了字体大小后；
- 字体计算公式：1 ÷ 父元素的 font-size × 需要转换的像素值 = em 值
- 其它属性的计算公式：1 ÷ 元素自身的 font-size × 需要转换的像素值 = em 值
rem
相对长度单位，r 是 roo 的缩写，相对于根元素 html 的字体大小，所以我们只需在根元素确定一个参考值即可。优点：只需要设置根目录的大小就可以把整个页面成比例的调好。但也绝不是每个地方都要用rem，rem只适用于固定尺寸。
例如设置 HTML 大小为 10px（ html { font-size: 62.5%; } /*10 ÷ 16 × 100% = 62.5%*/ 效果也一样），那么 1.2rem 就是 12px。
例如上面的 html 代码添加样式 div3 { font-size: 1.5rem; }，此时 div3 的 font-size = 1.5 * 16px = 1.5 * html 的 font-size
em 和 rem 的使用：
- 如果这个属性根据它的font-size进行测量，则使用 em
- 其他的属性均使用rem
另提供一个 px、em、rem 单位的转换工具：
%
相对于包含它的最近的父元素。对于普通元素就是我们理解的父元素；对于 position: absolute; 的元素是相对于已设定 position: relative; 的父元素；对于 position: fixed; 的元素是相对于 ViewPort（可视窗口）
%一般来说是相对于父元素来讲，但有特殊情况：
1、如果用来设置字体，相对的是父元素的字体大小，大多数浏览器中默认的字体尺寸是100%；
2、如果用来设置宽和高等非字体尺寸，则以百分比为单位的长度值是基于具有相同属性的父元素的长度值。
vw、vh
css3新单位，view width 的简写，指相对于视口的高度和宽度。1vh = 1% 的视口高度。比如浏览器高度 900px，则 1vh = 900px * 1% = 9px。
实现与同屏幕等高的框，heigh: 100vh，在出现竖向滚动条的时候 vh = % + 滚动条的高度。
vm
vmax and vmin 关于视口高度和宽度的最小/大值。如浏览器的宽度为1200px，高度为800px，1vmax = 1200 / 100px = 12px，vmin = 800 / 100px = 8px。
有一个元素需要让它始终在屏幕上可见：height: 100vmin; width: 100vmin；如果让这个元素始终铺满整个视口的可见区域：height: 100vmax; width: 100vmax。
以上这些单位在 CSS 布局使用中：
1. 盒子，图片等宽度设置首选百分比，次而选择 rem，高度可以是固定值；
2. 字体可以不用 rem，误差太大了，且不能满足任何屏幕下字体大小相同，所以建议标题类用 rem，要求字体大小相同的部分还是用 px；
3. 流布局、响应式布局等适配方式，rem 适配更为灵活，在不同屏幕尺寸上根据根节点来等比适配；
