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

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

设置根节点 `font-size`

首先需要了解的是 rem 单位是CSS3新增的一个相对单位（root em，根em），使用rem为元素设定字体大小时，相对的是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。

javascript 复制代码

// 基准大小
const baseSize = 32
// 设置 rem 函数
function refreshRem () {
  // 当前页面宽度相对于 750 宽的缩放比例，可根据自己需要修改。
  const scale = document.documentElement.clientWidth / 750
  // 设置页面根节点字体大小
  document.documentElement.style.fontSize = (baseSize * Math.min(scale, 2)) + 'px'
}
// 初始化
refreshRem()

let tid
window.addEventListener('resize', function() {
    clearTimeout(tid);
    tid = setTimeout(refreshRem, 300);
}, false);
window.addEventListener('pageshow', function(e) {
    if (e.persisted) {
        // 页面从浏览器的缓存中读取
        clearTimeout(tid);
        tid = setTimeout(refreshRem, 300);
    }
}, false);

在 main.js 引入

arduino 复制代码

import ./rem.js

引入文件后，查看页面的html节点，是否有被自动添加 font-size。

自动转换 px 为 rem

1、安装插件

复制代码

npm install postcss-pxtorem autoprefixer -D

2、配置 postcss.config.js

ini 复制代码

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

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

3、通过以下命令构建的vue应用在编译时会自动查找配置文件 postcss.config.js (内部基于 webpack 配置)

sql 复制代码

npm create vue@latest

总结

1、创建应用，安装依赖，注意去掉 package.json 中 type 配置

sql 复制代码

npm create vue@latest
npm i
npm install postcss-pxtorem autoprefixer -D

2、根目录创建 postcss.config.js 文件

3、main.js 同目录创建 rem.js 文件，并在 main.js 引入

4、启动，在控制台可以看到根节点有 font-size ，并且 px 已经被自动转为 rem了