位置: IT常识 - 正文
Vue3、vite项目页面自适应配置（postcss-plugin-px2rem、amfe-flexible）(vue项目页面写在哪里)
发布时间：2024-01-03推荐整理分享Vue3、vite项目页面自适应配置（postcss-plugin-px2rem、amfe-flexible）(vue项目页面写在哪里)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:vue3.0项目,vue项目搭建好之后如何写页面,vue项目搭建好之后如何写页面,vue项目前端页面模板,vue3项目目录,vue项目搭建好之后如何写页面,vue3.0项目,vue项目搭建好之后如何写页面,内容如对您有帮助，希望把文章链接给更多的朋友！
文章目录前言：vite 如何处理 csspostcss项目配置下载相关包配置方案一方案二（备选方案）相关资料链接前言：vite 如何处理 cssvite 天生就支持对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 -snpm 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
上一篇：Python之ImportError: DLL load failed: 找不到指定的模块解决方案
下一篇：edge浏览器被百度占用了如何解决？(edge浏览器百度网盘插件)
