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

Vue3、vite项目页面自适应配置(postcss-plugin-px2rem、amfe-flexible)_第1张图片

文章目录

  • 前言:vite 如何处理 css
    • postcss
  • 项目配置
    • 下载相关包
    • 配置
      • 方案一
    • 方案二(备选方案)
  • 相关资料链接

前言: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

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

你可能感兴趣的:(Vue,vite,postcss,前端,javascript)