当前位置：首页 > news >正文

vue 多端适配之pxtorem

news 2025/6/6 16:56:26

在 Vue 3 + Vite 项目中使用 postcss-pxtorem 自动将 px 单位转换为 rem 单位，可以按照以下步骤配置：

一、基础版本

1. 安装依赖

首先安装必要的插件：

npm install postcss postcss-pxtorem autoprefixer -D
# 或
yarn add postcss postcss-pxtorem autoprefixer -D

2. 在vite.config.ts中引入并配置

  css: {preprocessorOptions: {
//less配置，不需要注释掉less: {math: "always", // 括号内才使用数学计算globalVars: {// 全局变量mainColor: "red",},},},postcss: {plugins: [postcssPxtorem({rootValue: 37.5, // UI设计稿的宽度/10unitPrecision: 3, // 转rem精确到小数点多少位propList: ["*"], // 需要转换的属性 *表示所有selectorBlackList: ["ignore"], // 不进行px转换的选择器replace: true, // 是否直接更换属性值，而不添加备用属性mediaQuery: false, // 是否在媒体查询的css代码中也进行转换minPixelValue: 0, // 设置要替换的最小像素值exclude: /node_modules/i, // 排除node_modules文件夹下的文件}),autoprefixer,],},},

3. 创建一个rem.js文件内容如下，再在入口文件中去引入该文件

// 判断是否是PC端
const isPc = !/Android|iPhone|SymbianOS|Windows Phone|iPad|iPod/i.test(navigator.userAgent
);
// 设置基础根文件大小
let baseSize = 37.5;
// rem 函数
function setRem() {const clientWidth = document.documentElement.clientWidth;// 设计稿一般都是以375的宽度let scale = clientWidth / (baseSize * 10);// 设置页面根节点字体大小（“Math.min(scale, 2)” 指最高放大比例为2，可根据实际业务需求调整）let enlarge = 1.5;if (isPc) {enlarge = 1;scale = clientWidth / 980; // 980 是PC端设计稿的宽度}document.documentElement.style.fontSize =baseSize * Math.min(scale, enlarge) + "px";
}
// 调用方法
setRem();// 监听窗口在变化时重新设置跟文件大小
window.onresize = function () {setRem();
};export default {};

4. 在main.js中引入

import { createApp } from "vue";
import "./style.css";
import App from "./App.vue";
import ElementPlus from "element-plus";
import "element-plus/dist/index.css";
import router from "./router/index";
import "mapbox-gl/dist/mapbox-gl.css";
import "./utils/rem";
const app = createApp(App);app.use(ElementPlus);
app.use(router);
app.mount("#app");

二、详细版本

1. 安装依赖

首先安装必要的插件：

npm install postcss postcss-pxtorem autoprefixer -D
# 或
yarn add postcss postcss-pxtorem autoprefixer -D

2. 配置 `postcss.config.js`

在项目根目录创建或修改 postcss.config.js 文件：

module.exports = {plugins: {'postcss-pxtorem': {rootValue: 16, // 基准值（1rem = 16px）propList: ['*'], // 需要转换的属性，*表示所有selectorBlackList: ['.el-'], // 忽略包含.el-的class（不转换Element Plus样式）minPixelValue: 2 // 小于2px不转换},autoprefixer: {} // 自动添加浏览器前缀}
}

3. 修改 `vite.config.ts`

确保 Vite 已启用 PostCSS：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'export default defineConfig({plugins: [vue()],css: {postcss: {// 自动读取postcss.config.js}}
})

4. 动态设置基准值（可选）

在 main.ts 中设置 HTML 根字体大小（通常基于设计稿宽度）：

// 根据设计稿调整（设计稿宽度/10）
function setRemUnit() {const docEl = document.documentElementconst ratio = docEl.clientWidth / 1920 // 1920是设计稿宽度docEl.style.fontSize = 16 * Math.min(ratio, 2) + 'px' // 限制最大缩放
}setRemUnit()
window.addEventListener('resize', setRemUnit)

5. 注意事项

Element Plus 适配：
- 通过 selectorBlackList 忽略 Element 组件样式
- 或单独配置 Element 的 rem 比例

样式写法：

/* 转换前 */
.dialog-wrapper {width: 240px;padding: 12px;
}/* 转换后（假设rootValue=16） */
.dialog-wrapper {width: 15rem;padding: 0.75rem;
}

开发环境检查：
- 确认转换生效：检查浏览器开发者工具中的最终样式
- 可以通过 /* px-to-viewport-ignore-next */ 注释跳过特定行的转换

完整配置示例

// postcss.config.js
module.exports = {plugins: {'postcss-pxtorem': {rootValue: 16,propList: ['*', '!border*'], // 不转换border相关属性exclude: /node_modules\/element-plus/ // 忽略element-plus},autoprefixer: {overrideBrowserslist: ['last 2 versions']}}
}