背景:开发PC端网站项目时,需兼容所有系统,不同浏览器的适配,在用户调整窗口大小时也做到样式适配问题
问题:使用px会造成页面出现滚动条,不同系统分辨率不一致,会造成样式错乱问题
解决:
1.安装必要的依赖
安装 postcss-pxtorem 作为基础插件
这里需注意:需指定版本安装,过高可能会导致报错
npm install postcss-pxtorem@5.1.1 --save
2.配置postcss-pxtorem
在项目根目录下创建或修改 postcss.config.js 文件,配置 postcss-pxtorem 插件:
module.exports = {
"plugins": {
'postcss-pxtorem': {
rootValue: 19, // 表示根元素字体大小或根据input参数返回根元素字体大小
propList: ['*'], // 可以从px更改为rem的属性, 通配符*表示启用所有属性
selectorBlackList: ['.norem'] // 过滤掉.norem开头的class,不进行rem转换
}
}
}
3.在utils文件夹里创建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()
};
4.在main.js中引用
import '@/src/utils/rem.js'
注意配置完成后重启项目以确保生效
5.开发继续使用px单位,将自动转换为rem,适配不同的屏幕宽度。
css中的样式将根据当前页面宽度相对于1920px屏幕宽的缩放比例进行计算
.head { width:200px;// 将被转换为 rem height:200px;// 将被转换为 rem font-size: 16px; // 将被转换为 rem }
style中的样式不会被转换
<div style="width:200px;"></div>
可以运行项目在不同尺寸的设备进行测试,确保在各种设备都能完美适配,避免样式错乱问题.
总结
这个完整的适配方案通过插件和动态脚本的结合,实现了 Vue 项目在各种屏幕宽度下的自动适配。无论用户如何调整窗口大小,都能保持样式的一致性和稳定性。