Vite vue项目配置，px转rem，以及实现设计稿的等比例缩放

Vite vue项目配置，px转rem，以及实现设计稿的等比例缩放

准备

• 安装插件

▼
shell
复制代码
yarn add postcss-pxtorem -D

概念解析（一）

• 设计稿大大小，指的是UI在绘制效果图的大小，一般指的是宽度（eg：375px 750px 1920px）
• 1rem大小，作者觉得应该叫做单位大小比较好，指的是设计稿元素的大小（以px为单位）放大 单位大小后 就变成了页面元素大小，即：1设计稿px * 1单位 = 1页面px

概念解析（二）

• 当使用rem时，一般我们在看到的元素单位全是以rem为单位的，那么如何控制1rem大小呢？一般会在最外层配置font-size: 16 px; 来控制1rem大小，即：设计稿的1px相当于页面的16px（1px * 1rem = 16px 其中 1rem = 16px），但是页面中的元素显示单位一般是1rem而不是16px。

理论分析

• 因此基于上面的分析，只要我们在编写代码时全部使用px作为单位，然后在打包时把所有以px做单位的值除以1rem大小（也就是还原成设计稿大小，当你本身开发使用的页面大小就是设计稿大小时，可以设置 1rem = 1px，也就是说不需要缩放即是设计稿大小），然后在最外层根据实际情况配置1rem大小进行统一缩放即可。

• 而postcss-pxtorem就是帮助我们完成上面 除 操作的插件，即帮我们还原成设计稿大小

实战应用

• 首先我们在安装好插件后，需要先配置几个VITE环境变量

▼
.env
复制代码
# 1rem 大小 随意即可，写1px方便调节尺寸
VITE_1_REM_SIZE=1
# 设计搞尺寸,设计稿宽度
VITE_DESIGN_SIZE=1920

• 配置vite

▼
js
复制代码
// vite.config.js
import {resolve} from "path";
import {defineConfig, loadEnv} from 'vite'
import postCssPxToRem from 'postcss-pxtorem'
import vue from '@vitejs/plugin-vue'
// https://vite.dev/config/

const root = process.cwd();
const pathSrc = resolve('./', "src");

export default defineConfig(({command, mode}) => {
    let env = loadEnv(mode, root);
    return {
        base: env.VITE_APP_PREFIX,
        resolve: {
            alias: {
                "@": pathSrc,
            },
        },
        plugins: [
            vue(),
        ],
        css: {
            postcss: {
                plugins: [
                    postCssPxToRem({ // 自适应，px>rem转换
                        // 1rem的大小,即单位大小
                        rootValue({file}) {
                            return env.VITE_1_REM_SIZE
                        },
                        propList: ['*'], // 需要转换的属性，这里选择全部都进行转换
                    })
                ]
            },
        },
        server: {
            host: "0.0.0.0",
            port: 3011,
            open: false,
            // 本地跨域代理，开发阶段生效
            proxy
        },
    }
})

• 绑定事件，动态放大缩小

▼
js
复制代码
// rem.js
// rem等比适配配置文件
// 基准大小
const baseSize = import.meta.env.VITE_1_REM_SIZE;
const designSize = import.meta.env.VITE_DESIGN_SIZE;
// 设置 rem 函数
function setRem() {
    // 当前页面宽度相对于 设计稿宽的缩放比例，可根据自己需要修改。
    const scale = document.documentElement.clientWidth / designSize;
    // 根据实际页面缩放基础1rem大小，
    document.documentElement.style.fontSize = baseSize * scale + "px";
}
// 初始化
setRem();
// 改变窗口大小时重新设置 rem
window.onresize = function() {
    setRem();
};