自动添加前缀：
自适应：
1、安装postcss-pxtorem 和 autoprefixer
npm install postcss-pxtorem --save npm i autoprefixer
2、vite.config.js引入并配置
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'
// 引入⬇️
import postCssPxToRem from 'postcss-pxtorem'
import autoprefixer from 'autoprefixer'
const pathResolve = (dir) => {
return resolve(__dirname, ".", dir)
}
const alias = {
'@': pathResolve("src")
}
export default ({ command }) => {
const prodMock = true;
return {
base: './',
resolve: {
alias
},
server: {
port: 3004,
host: '0.0.0.0',
open: true,
},
build: {
rollupOptions: {
output: {
manualChunks: {
}
}
}
},
plugins: [
vue(),
],
css: {
postcss: { // ⚠️关键代码
plugins: [
postCssPxToRem({ // 自适应，px>rem转换
rootValue: 16, // 1rem的大小
propList: ['*'], // 需要转换的属性，这里选择全部都进行转换
}),
autoprefixer({. // 自动添加前缀
overrideBrowserslist: [
"Android 4.1",
"iOS 7.1",
"Chrome > 31",
"ff > 31",
"ie >= 8"
//'last 2 versions', // 所有主流浏览器最近2个版本
],
grid: true
})
]
},
}
};
}
3、App.vue（自适应才需要）
<template>
<div id="app">
</div>
</template>
<script setup>
// 自适应
function resize() {
let fs = document.body.clientWidth / 75;
// 上面的75是根据设计图尺寸修改，例如设计图宽为1220，给左右两边各留10px，即1220-20=1200，1200/16(字体大小)等于75
if (fs > 16) { // 控制字体大小，以免过大过小
fs = 16;
} else if (fs < 14) {
fs = 14;
}
// ?注意这里不能直接document.body.style
document.body.parentNode.style = "font-size: " + fs + "px;";
}
resize();
window.onresize = resize;
</script>
以上为个人经验，希望能给大家一个参考，也希望大家多多支持本站。