1.通过插件安装
//把全局的px换成rem
npm install amfe-flexible --save
//vue2版本的一定要5.1.1,要不然就g
npm install postcss-pxtorem@5.1.1 --save-dev
2.项目里会有一个.postcssrc.js文件, 或者 postcss.config.js,没有就创建
module.exports = {
"plugins": {
"postcss-import": {},
"postcss-url": {},
// to edit target browsers: use "browserslist" field in package.json
"autoprefixer": {},
'postcss-pxtorem': {
rootValue: 192, //一般是设计宽的1/10
propList: ['*']
}
}
}
3.main.js引入转换rem的插件
import 'amfe-flexible';
注意注意:以上操作是可以做到适配的,切记切记一点,代码一定要写规范,最好是一开始就合理的安装1920*1080设计图上所有尺寸来写,包括嵌套div的时候如果不设置宽度高度页面也会畸形,比如一个div是200px,另一个如果不知道,那么就要calc(100% - 200px)一定要等分100%尺寸,否则也会畸形
参考大佬文献:https://www.cnblogs.com/zhurong/p/14011857.html
网友评论