【vue:淘宝rem自适应 】

vue:淘宝rem自适应

1.安装lib-flexible：cnpm install lib-flexible --save

2.在main.js中引入：import 'lib-flexible/flexible.js’

3.配置flexible找到vue-cli路径node_modules/lib-flexible/flexible.js，然后修改rem换算单位

4.配置px to rem插件：设置—找到Root Font Size 值为:设计稿宽度/份数(1920/24=80);

5.把px----全部转成----rem(vsCode快捷键：alt+Z)

没有的先去安装插件

6.注意：如果以上操作没有效果，把下面一步执行

将vue项目下的public下的index.html文件里面的一行代码注释掉，否则lib-flexible可能不会起作用。
<meta name="viewport" content="width=device-width,initial-scale=1.0”>
因为lib-flexible会自动生成meta，所以可以将public/index.html中的删了，如果要使用媒体查询的话就不能删，媒体查询中的代码就会出现问题

最后，一通操作完成后，可以打开检查面板看到：html的font-size会随着屏幕缩放改变；