# 一、单位
# 1.1em
em作为font-size的单位时，其代表父元素的字体大小，em作为其他属性单位时，代表自身字体大小
比如父元素font-size:12px;
自身元素如果写成：font-sise: 2em;则自身元素用px表示就是24px（相对父元素字体大小）
但是自身元素设置：width: 2rem;那么自身元素用px表示就是48px（相对自身字体大小）
# 1.2Rem
rem作用于非根元素时，相对于根元素字体大小；rem作用于根元素字体大小时，相对于其出初始字体大小
比如根元素（html）设置font-size: 12px;非根元素设置width:2rem;则换成px表示就是24px；
如果根元素设置成font-size: 1rem则根元素换成px就是相对于初始字体大小，一般是12px；
# 1.3vm/vh
vw： 视口宽度的 1/100
vh：视口高度的 1/100
# 二、rem布局原理
假设我们将屏幕平局分为10份，每一份宽度用一个a表示，即a=屏幕宽度/10;那么：
div{width: 5a} /* 屏幕宽度的50% */
但是css中没有a这个单位，可以实现借助rem代替上面的a
html {font-size: width / 10}
div {width: 5rem} /* 5rem = 5a = 屏幕宽度的50% */
用js很容易动态的设置html的font-size恒等屏幕的1/10
可以在页面dom ready、resize和屏幕旋转中设置
document.documentElement.style.fontSize = document.documentElement.clientWidth / 10 + 'px';
# 三、优缺点
rem是一种弹性布局，它强调等比缩放，100%还原
它和响应式布局不一样，响应式布局强调不同屏幕要有不同的显示，比如媒体查询
字体并不合适使用rem, 字体的大小和字体宽度，并不成线性关系，所以字体大小不能使用rem
# 四、vw/wh用来做弹性布局
/* rem方案 */
html {font-size: width / 10}
p {width: 1.5625rem}
/* vw方案 */
p {width: 15.625vw}
如果rem方案中使用设置font-size: width/100就和vm意思一样
但是比如font-size: 640px/100;浏览器不会识别6.4px这么小的字体的
如果不考虑兼容性问题，可以大胆使用vw/vm做弹性的布局