vue全局自适应大小: postcss-pxtorem,vue2vue3通用适配

1. 安装postcss-pxtorem插件

npm install postcss-pxtorem -D

如果运行项目后报错 PostCSS plugin postcss-pxtorem requires PostCSS 8.

需要降低 postcss-pxtorem 的版本

卸载默认安装的版本 
npm uninstall postcss-pxtorem
 
安装指定版本
npm i [email protected]

番外: 不推荐 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

总结

适配的方法总体分为两步: 

1. px转换成rem
2. rem根据屏幕大小重置基数改变大小

注意项:

1. 标签中直接定义的 width和height进行不了转换, 例如img标签.
2. 标签中style属性的width和height是可以被转换的.

ok! 大概就是这个样子啦~ 

有疑问欢迎评论沟通哦