vue:移动端自适应------采用flexible.js

//rem（root em）是一个相对单位，基准是相对于html元素的字体大小（浏览器默认字体大小是16px)。如：根元素(html)设置font-size: 12px;  非根元素设置width: 2rem; 则换成px表示就是24px。
//amfe-flexible：原理是把当前设备宽度划分为10等份，动态设置html元素的字体大小为一份。如：当前屏幕宽度为360px，html元素的字体大小为36px。动态改变根元素的字体大小。
//postcss-pxtorem：不同设备下，元素占比是一定的，即rem的值不变。此工具自动将px转成rem。

1.flexible.js

之前采用 媒体查询，针对不同屏幕宽度，设置不同的基准 html 字体大小，写起来非常繁琐；

现在采用了淘宝的 flexible.js 实现自适应，它替我们封装了自适应的方法；

原理是把当前设备宽度划分为10等份，动态设置html元素的字体大小为一份。如：当前屏幕宽度为360px，html元素的字体大小为36px。动态改变根元素的字体大小。

flexible.js是手淘开发出的一个用来适配移动端的js框架。手淘框架的核心原理就是根据制不同的width给网页中html根节点设置不同的font-size，然后所有的px都用rem来代替，这样就实现了不同大小的屏幕都适应相同的样式了。其实它就是一个终端设备适配的解决方案，也就是说它可以让你在不同的终端设备中实现页面适配。

2.使用方式

引用cdn地址：

<script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.2/??flexible_css.js,flexible.js"
></script>

使用web pack构建工具下载amfe-flexible包：

npm i -S amfe-flexible

由于viewport单位得到众多浏览器的兼容，lib-flexible这个过渡方案已经可以放弃使用，不管是现在的版本还是以前的版本，都存有一定的问题。建议大家开始使用viewport来替代此方。

vue中引入：

index.html:
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scal