vue3使用rem适配

vue3使用rem适配

安装

npm i postcss-pxtorem@6.1.0 -D
npm i autoprefixer@10.4.21 -D

新建rem.js

function setRem() {
  let pageWidth = window.innerWidth;
  if (typeof pageWidth != 'number') {
    if (document.compatMode == 'CSS1Compat') {
      pageWidth = document.documentElement.clientWidth;
    } else {
      pageWidth = document.body.clientWidth;
    }
  }
  if (pageWidth <= 750) {
    const baseSize = 75;
    const scale = document.documentElement.clientWidth / pageWidth;
    // 设置页面根节点字体大小
    document.documentElement.style.fontSize = baseSize * Math.min(scale, 2) + 'px';
  } else if (pageWidth > 750 && pageWidth <= 1200) {
    const baseSize = 85;
    const scale = document.documentElement.clientWidth / pageWidth;
    // 设置页面根节点字体大小
    document.documentElement.style.fontSize = baseSize * Math.min(scale, 2) + 'px';
  } else {
    const baseSize = 100;
    const scale = document.documentElement.clientWidth / 1920;
    document.documentElement.style.fontSize = baseSize * Math.min(scale, 2) + 'px';
  }
}
setRem();
window.onresize = function () {
  setRem();
};

在main.js 中引入rem.js

 import './utils/rem.js'

项目根目录下新建postcss.config.js

const autoprefixer = require('autoprefixer');
const px2rem = require('postcss-pxtorem');
 
module.exports = {
 plugins: [
 // propList：需要进行转换的css属性的值，*意思是将全部属性单位都进行转换
 px2rem({ rootValue: 100,  exclude: /node_modules/i, propList:['*'] }),
 autoprefixer({}),
  ]
};

在vite.conig.js中配置postCssPxToRem

// 引入postCssPxToRem
import postCssPxToRem from 'postcss-pxtorem'
export default defineConfig(({ mode, command }) => {
  return {
    plugins:[
     vue()
    ],
    css: {
      postcss: {
        plugins: [
          postCssPxToRem({
            rootValue: 100, 
            propList: ['*', '!border'], // 除 border 外所有px 转 rem
            selectorBlackList: ['.norem'],
            // 过滤掉norem-开头的class，不进行rem转换
            unitPrecision: 5, // 转换后的精度，即小数点位数
            replace: true, // 是否直接更换属性值而不添加备份属性
            mediaQuery: false, // 是否在媒体查询中也转换px为rem
            minPixelValue: 0,// 设置要转换的最小像素值
          })
        ]
      }
    }
  }
})

重启项目