43. vue的移动端屏幕适配

1. 首先是适配基础知识的补充，主要是利用rem

http://caibaojian.com/flexible-js.html

1.2 适配的原理如下

a ) 首先利用flexible.js确定适配基础dpr和font-size
b ) 然后使用px2rem2-loader实现px转化为rem的值,（rem的值是由HTML的font-size来确定的） 按照6s设计图来配置相关参数

2. 然后具体的实现方案

1. 首先将index.html修改如下（flexible.js的内容移动到这里了）

注：遇到的问题

网上找到很多的博客的内容是将flexible.js单独的提出去，但是在实际的操作中发现会导致在通过浏览器的按钮刷新的时候导致适配出现错误，所以解决方案就是是把flexible.js的代码移到了index.html内部，没有采用静态链接的方式。

知识点补充：flexible.js 主要做了下面的几件事

动态改写标签
给元素添加data-dpr属性，并且动态改写data-dpr的值
给元素添加font-size属性，并且动态改写font-size的值

2. 然后接着按照上面文档的设置即可（从4开始配置）https://www.cnblogs.com/xiaobaibubai/p/8528744.html，
   这个步骤是为了将px转化为rem。
   知识点补充：使用Flexible实现手淘H5页面的终端适配
   https://github.com/amfe/article/issues/17?utm_source=caibaojian.com