版权声明:本文为博主原创文章,如需转载请务必注明原地址。 https://blog.csdn.net/qq_31393401/article/details/82353267
关于移动端的适配,我喜欢用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自学笔记(二)