Vue3、vite项目页面自适应配置（postcss-plugin-px2rem、amfe-flexible）

前言：vite 如何处理 css

vite 天生就支持对css文件的直接处理
关于预处理器

☀️目前，在工程化开发中，使用最多的应该就是Less、Sass和Stylus。
☀️首先，还是介绍一下它们吧。它们有个统一的名字——css预处理器。
☀️何为CSS预处理器？应该就是一种可以将你根据它的规则写出来的格式转成css的东西(还是讲的通
俗一点)。
☀️它们的出现可以说是恰逢其时，解决了css的一些缺憾：
1、语法不够强大，不能够嵌套书写，不利于模块化开发
2、没有变量和逻辑上的复用机制，导致在css的属性值中只能使用字面量形式，以及不断重复书写重复
3、的样式，导致难以维护。

postcss

☀️vite 天生对postcss有非常好的支持
☀️postcss => 保证css在执行起来是万无一失的
☀️你可以在使用预处理器的情况下使用它，也可以在原生的css中使用它。
☀️它都是支持的，并且它具备着一个庞大的生态系统，例如你可能常用的Autoprefixer，就是PostCSS
☀️的一个非常受欢迎的插件，被Google, Shopify, Twitter, Bootstrap和CodePen等公司广泛使用。

在这里就不用多说，后续会出单独一篇来讲这个东西，postcss是一个十分强大的工具

项目配置

下载相关包

npm install amfe-flexible -s
npm i postcss-plugin-px2rem -s

配置

方案一

vite.config.js的关于这个的配置
没有这个文件可以在项目根目录创建这个文件，进行配置
注意：vite.config.js 配置 需要导入（看具体需要）

import {
    defineConfig,
    loadEnv
} from "vite";
import vue from "@vitejs/plugin-vue"; 

❤️ vite.config.js 部分配置

const px2remOptions = {
    rootValue: 14.4,  //换算基数， 默认100 ,也就是1440px ，这样的话把根标签的字体规定为1rem为50px,这样就可以从设计稿上量出多少个px直接在代码中写多少px了
    unitPrecision: 5, //允许REM单位增长到的十进制数字，其实就是精度控制
    // propWhiteList: [], // 默认值是一个空数组，这意味着禁用白名单并启用所有属性。
    // propBlackList: [], // 黑名单
    // exclude:false,  //默认false，可以（reg）利用正则表达式排除某些文件夹的方法，例如/(node_module)/ 。如果想把前端UI框架内的px也转换成rem，请把此属性设为默认值
    // selectorBlackList: [], //要忽略并保留为px的选择器
    // ignoreIdentifier: false, //（boolean/string）忽略单个属性的方法，启用ignoreidentifier后，replace将自动设置为true。
    // replace: true, // （布尔值）替换包含REM的规则，而不是添加回退。
    mediaQuery: false, //（布尔值）允许在媒体查询中转换px
    minPixelValue: 0  //设置要替换的最小像素值(3px会被转rem)。 默认 0
}

return defineConfig({
        resolve: {
            alias: [{
                find: '@',
                replacement: path.resolve(__dirname, './src')
            }]
        },
        plugins: [vue()],
        base: process.env.VITE_APP_BASE,
        build: {
            outDir: 'dist',
        },
        css: {
            postcss: {
                plugins: [px2rem(px2remOptions)]
            }
        }
    });

❤️ 我们剩下的就是动态修改html的font-size
创建utils/dom.js文件

import _ from 'lodash'
// 以1920px 底图为准开发页面
export const setDomFontSize = () => {
    let width = document.documentElement.clientWidth || document.body.clientWidth;
    let fontsize = (width <= 200 ? 1200 : width) / 100 + 'px';
    (document.getElementsByTagName('html')[0].style)['font-size'] = fontsize;
}

let setDomFontSizeDebounce = _.debounce(setDomFontSize, 400)
window.addEventListener('resize', setDomFontSizeDebounce); // 浏览器加入收缩监听防抖，重新计算rem配置

剩下的就是在main.js 里面引入并触发函数

import {
    setDomFontSize
} from './utils/dom'
setDomFontSize()

其实我们上面的方案的配置也可以写在单独的文件里

方案二（备选方案）

postcss.config.js
如果没有该文件就自己在项目根目录上创建postcss.config.js

// 这个地方需要引入postcss-plugin-px2rem，这里只有部分代码，需要手动补全，引入就好了
module.exports = {
    plugins: [
        require("autoprefixer"),
        require("postcss-plugin-px2rem")({
            //rootValue: 19.2, //换算基数，1rem相当于10px,值为37.5时,1rem为20px,淘宝的flex默认为1rem为10px
            // unitPrecision: 5, //允许REM单位增长到的十进制数字。
            //propWhiteList: [],  //默认值是一个空数组，这意味着禁用白名单并启用所有属性。
            propBlackList: ['font-size', 'border'], //黑名单
            exclude: /(node_module)/, //默认false，可以（reg）利用正则表达式排除某些文件夹的方法，例如/(node_module)\/如果想把前端UI框架内的px也转换成rem，请把此属性设为默认值
            // selectorBlackList: [], //要忽略并保留为px的选择器
            // ignoreIdentifier: false,  //（boolean/string）忽略单个属性的方法，启用ignoreidentifier后，replace将自动设置为true。
            // replace: true, // （布尔值）替换包含REM的规则，而不是添加回退。
            mediaQuery: false, //（布尔值）允许在媒体查询中转换px。
            minPixelValue: 3, //设置要替换的最小像素值(3px会被转rem)。 默认 0
        }),
    ],
};

相关资料链接

B站教学vite教学视频
掘金好文-配置文章
掘金好文-谈谈PostCSS
深入学习postcss

小广告~

vx关注：A返x小助手 （购物返现、外卖大额领券、高额打车券，优惠点餐，低价电影票等）