vue pc移动两个html,Vue-cli3 pc+移动端自适应

一直以来PC端屏幕适配都是用flex或者百分比流式布局来做的，偶尔用到媒体查询，为了今后项目工作的方便，现在研究一套新的布局方案，通过第三方库将我们写入的css样式中的px单位在客户端转换成rem单位，这样无论什么屏幕都能完成适配，pc和移动端公用的话特殊的地方可以用媒体查询稍微修改一下就好了，后面再研究一下bootstrap的适配方案，后续会继续记录一下的

1、安装lib-flexiblenpm install lib-flexible -S

2、安装px2rem-loader/postcss-px2remnpm install px2rem-loader

postcss-px2rem -S

3、修改flexible.js 将540改为width(在node_modules里面找到lib-flexible)

4、在main.js中引入lib-flexible

5、配置vue.config.js

6、删除index.html中的meta标签，因为lib-flexible会自动生成meta

7、重新启动项目，基本上就没什么问题了，亲测有效