vue3+vite项目自动转换 px 为 rem

在前端开发中，会遇到需要适配不同屏幕分辨率的情况，因此考虑编译时自动将项目中的 px 转换为 rem。本文介绍通过配置后，在开发中可以直接使用设计图的尺寸开发，项目为我们自动编译，转换成rem。

1. 首先我们要设置跟节点 font-size

我们在 config 文件中 创建 rem.js 文件

// rem 函数
function setRem() {
  const defalutWidth = 1920 // 默认宽度
  const defalueScale = 1 // 默认比例关系
  let defalutFontSize = 192 // 默认字体大小
  const getWidth = window.innerWidth // 获取屏幕的宽度
  let currentScale = getWidth / defalutWidth // 计算当前的屏幕大小和默认宽度之间的比例
  // 防止缩放太小
  if (currentScale < 0.85 && getWidth > 1024) {
    currentScale = 0.855
  }
 
  // 当前为平板时
  if (getWidth <= 1024) {
    defalutFontSize = defalutFontSize * 2
  }
 
  // 计算的宽度比例关系 再 * 默认的字体大小,获取计算的字体大小
  const currentFontSize = (currentScale / defalueScale) * defalutFontSize
  document.documentElement.style.fontSize = currentFontSize + 'px'
}
 
// 调用方法
setRem()
 
// 监听窗口在变化时重新设置跟文件大小
window.onresize = function () {
  setRem()
}

2. 在main.js 中引入

 import './config/rem'

3. 自动转换 px 为 rem

npm install postcss-pxtorem autoprefixer -D

4.配置 postcss.config.js

const autoprefixer = require('autoprefixer');
const px2rem = require('postcss-pxtorem');

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

5.然后再到vite.conig.js中去配置postCssPxToRem。 

import { defineConfig, loadEnv } from 'vite';
import vue from '@vitejs/plugin-vue';
// 引入postCssPxToRem
import postCssPxToRem from 'postcss-pxtorem'
export default defineConfig(({ mode, command }) => {
  const env = loadEnv(mode, process.cwd())
  const { VITE_APP_ENV } = env
  return {
    plugins:[
     vue()
    ],
    css: {
      postcss: {
        plugins: [
          postCssPxToRem({
            // 自适应，px>rem转换
            rootValue: 192, //pc端建议：192，移动端建议：75；设计稿宽度的1 / 10
            propList: ['*', '!border'], // 除 border 外所有px 转 rem // 需要转换的属性，这里选择全部都进行转换
            selectorBlackList: ['.norem'],
            // 过滤掉norem-开头的class，不进行rem转换，这个内容可以不写
            unitPrecision: 5, // 转换后的精度，即小数点位数
            replace: true, // 是否直接更换属性值而不添加备份属性
            mediaQuery: false, // 是否在媒体查询中也转换px为rem
            minPixelValue: 0,// 设置要转换的最小像素值
          })
        ]
      }
    }
  }
});

 5.