Vue3、vite项目页面自适应配置(postcss-plugin-px2rem、amfe-flexible)
阿里云国内75折 回扣 微信号:monov8 |
阿里云国际,腾讯云国际,低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号:monov8 飞机:@monov6 |
文章目录
前言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
阿里云国内75折 回扣 微信号:monov8 |
阿里云国际,腾讯云国际,低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号:monov8 飞机:@monov6 |