移动端适配

一、Rem

子元素的rem单位的属性，是根据html元素字体大小，来修改实际大小的

html {font-size: 16px}
p {width: 2rem} /* 32px*/

html {font-size: 32px}
p {width: 2rem} /*64px*/

如果让html元素字体的大小，恒等于屏幕宽度的1/100，那么1rem==1x

html {fons-size: width / 100}
p {width: 50rem} /* 50rem = 50x = 屏幕宽度的50% */

那么怎么设置font-size的大小恒等于屏幕宽度的1/100呢，手淘开发出一个用来适配移动端的js框架flexible.js，核心原理就是根据不同的width给网页中html根节点设置不同的font-size，然后所有的px都用rem来代替，这样就实现了不同大小的屏幕都适应相同的样式了。

//CDN引入
<script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.2/??flexible_css.js,flexible.js"></script>
//单页面应用使用（webpack 构建工具使用）
npm i -S amfe-flexible
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<script src="./node_modules/amfe-flexible/index.js"></script>

二、vw vh

相对单位,相对视口的尺寸计算结果

vw-viewport width  1vw=1/100视口宽度

vh-viewport height  1vh=1/100视口高度