vue-cli3.0引入px2rem与lib-flexible 移动端适配 - 好文

关于移动端的适配，我喜欢用px2rem配合lib-flexible，非常方便，vue-cli3.0后，项目配置被大大精简了，这使得原来配置px2rem的文件不复存在，但其实只要掌握了正确的姿势，配置方法比原来更简单~

<>lib-flexible

作用：让网页根据设备dpr和宽度，利用viewport和html根元素的font-size配合rem来适配不同尺寸的移动端设备
安装：yarn add lib-flexible
引入：入口文件main.js中：import 'lib-flexible/flexible.js'

<>pxtorem

作用：将项目中css的px转成rem单位，免去计算烦恼
安装：yarn add postcss-pxtorem
配置：package.json内，在postcss内添加：
"postcss": { "plugins": { "autoprefixer": {}, "postcss-pxtorem": { "rootValue":
75, // 设计稿宽度的1/10,（JSON文件中不加注释，此行注释及下行注释均删除） "propList":["*"] //
需要做转化处理的属性，如`hight`、`width`、`margin`等，`*`表示全部 } } },
<>TIPS

1、pxtorem中，对于想忽略的px写成大写即可，诸如 border:1PX solid #fff;
2、也可以选择postcss-px2rem，我更喜欢pxtorem的忽略方式，方便我vscode的beautify自动格式化代码
3、postcss-pxtorem 与 px2rem-loader的更多比较见：postcss自学笔记（二）
<https://segmentfault.com/a/1190000010947054#articleHeader1>

vue-cli3.0 更原生的适配移动端解决方案：vw
<https://blog.csdn.net/qq_31393401/article/details/82354879>

热门工具换一换