Vue自定义表单（vue3+vite使用postcss-pxtorem、autoprefixer自适应和自动添加前缀）
导读：自动添加前缀：...
自动添加前缀：
自适应：
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>
以上为个人经验 ，希望能给大家一个参考 ，也希望大家多多支持本站 。
声明：本站所有文章 ，如无特殊说明或标注 ，均为本站原创发布 。任何个人或组织 ，在未征得本站同意时 ，禁止复制 、盗用 、采集 、发布本站内容到任何网站 、书籍等各类媒体平台 。如若本站内容侵犯了原著者的合法权益 ，可联系我们进行处理 。
创心域SEO版权声明：以上内容作者已申请原创保护，未经允许不得转载，侵权必究！授权事宜、对本内容有异议或投诉，敬请联系网站管理员，我们将尽快回复您，谢谢合作！