1. 安装postcss-pxtorem插件
npm install postcss-pxtorem -D
如果运行项目后报错 PostCSS plugin postcss-pxtorem requires PostCSS 8.
需要降低 postcss-pxtorem 的版本
卸载默认安装的版本
npm uninstall postcss-pxtorem
安装指定版本
npm i postcss-pxtorem@5.1.1
番外: 不推荐 postcss-px2rem插件. 据测试, 若同时安装了vant插件, main.js导入vant样式文件会报错, 暂不细究原因.
2. 插件的基本配置
2.1 方法一
(vue.config.js文件中添加配置)
// 引入等比适配插件
const pxToRem = require('postcss-pxtorem');
// 配置基本大小
const postcss = pxToRem({
rootValue: 36, // 表示根元素字体大小或根据input参数返回根元素字体大小
propList: ['*'], // 可以从px更改为rem的属性, 通配符*表示启用所有属性
selectorBlackList: ['.norem'] // 过滤掉.norem开头的class,不进行rem转换
})
module.exports = defineConfig({
......
......
css: {
// 使用css分离插件 ExtractTextPlugin
extract: true,
// 开启 CSS source maps
sourceMap: false,
// css预设器配置项
loaderOptions: {
postcss: {
postcssOptions:{
plugins: [
postcss
]
},
}
}
},
})
2.2 方法二(推荐)
(根目录下创建postcss.config.js文件)
module.exports = {
plugins: {
'postcss-pxtorem': {
rootValue: 19, // 表示根元素字体大小或根据input参数返回根元素字体大小
propList: ['*'], // 可以从px更改为rem的属性, 通配符*表示启用所有属性
selectorBlackList: ['.norem'] // 过滤掉.norem开头的class,不进行rem转换
}
}
}
3. 自定义配置rem基数
3.1 新建rem.js
// 配置基本大小
let baseSize = 19;
// 设置 rem 函数
function setRem () {
//当前页面宽度相对于1920px屏幕宽的缩放比例,可根据自己需要修改。
let scale = document.documentElement.clientWidth / 1920;
//设置页面根节点字体大小(“Math.min(scale, 2)” 指最高放大比例为2,可根据实际业务需求调整)
document.documentElement.style.fontSize = baseSize * Math.min(scale, 2) + 'px'
}
setRem(); //初始化
// 适配 - 重置函数
function resetRem (num) {
if(num) baseSize = Number(num);
setRem();
}
window.resetRem = resetRem; // 全局可调用(其他方式也可)
// 改变窗口大小时重置 rem
window.onresize = function () {
setRem()
};
3.2 引入rem.js
import './utils/rem.js'; //在main.js中引入rem.js
总结
适配的方法总体分为两步:
- px转换成rem
- rem根据屏幕大小重置基数改变大小
注意项:
- 标签中直接定义的 width和height进行不了转换, 例如img标签.
- 标签中style属性的width和height是可以被转换的.
ok! 大概就是这个样子啦~
有疑问欢迎评论沟通哦