VUE 项目适配PC屏幕的方案及解决办法

背景：开发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 项目在各种屏幕宽度下的自动适配。无论用户如何调整窗口大小，都能保持样式的一致性和稳定性。