本文已参与【新人创作礼】活动，一起开启掘金创作之路
vue实现大屏、移动端自适应适配
###### vue实现大屏、移动端自适应我一般选择的是lib-flexible插件，lib-flexible插件是淘宝项目组开发出来的一款小插件，属于开源项目，可以在各类项目中引入使用，为移动端和大屏适配提供了极大的便利。
关于lib-flexible的事情：
- lib-flexible 会自动在html的head标签中添加一个meta name="viewport" 的标签，同时会自动设置html的font-size为屏幕宽度除以10，也就是说1 rem等于html根节点的font-size。
- 移动端适配步骤 一般而言，lib-flexible在使用过程中还需要和px2rem-loader插件一起做适配方案，目的是自动将css中的px单位转换成rem单位。
- 安装lib-flexible插件和 px2rem-loader插件 在cmd命令行中输入 npm install lib-flexible --save-dev ， npm install px2rem-loader --save-dev 随后等待其自动下载安装即可。
- 引入lib-flexible插件 在vue项目中main.js 文件中引入即可 import 'lib-flexible'
- 配置px2rem-loader（vue2.x） 在build/utlis.js中，找到exports cssloaders，进行如下修改：
const px2remLoader = { loader: 'px2rem-loader', options: { remUnit: 409 // 设计尺寸的10分之一 } }
然后找到function generateLoaders，做出如下修改：
const loaders = options.usePostCSS ? [cssLoader, postcssLoader,px2remLoader] : [cssLoader,px2remLoader]
修改完成后保存，重新在cmd命令行输入npm run dev即可生效。
-
针对大屏适配，做完以上配置后还需要额外的配置，打开./node_modules/lib-flexible/flexible.js， 找到function refreshRem()，进行下面的修改：
var width = docEl.getBoundingClientRect().width; if (width / dpr > 3860) { width = width * dpr; } if (width / dpr < 450) { width = width * dpr; //console.log(width); } var rem = width / 10; docEl.style.fontSize = rem + 'px'; flexible.rem = win.rem = rem;修改完成后，保存并且重启vue项目即可生效。 若为了进行效果检验，可在html前端随便自定义一个box，另其宽度、高度都为1rem，然后进行浏览器缩放测试，若发现box边框随浏览器变化而变化，则已代表适配已经配置完毕啦！
