1 · postcss-px-to-viewport将px自动转化为viewport单位
vue3 / vue2 配置文件 vue.config.js
module.exports = {
css: {
loaderOptions: {
postcss: {
plugins: [
require("postcss-px-to-viewport")({
unitToConvert: "px",
viewportWidth: 750,
unitPrecision: 6,
propList: ["*"],
viewportUnit: "vw",
fontViewportUnit: "vw",
landscapeUnit: "vh",
landscapeWidth: 667,
selectorBlackList: [],
minPixelValue: 1,
mediaQuery: false,
replace: true,
}),
],
},
},
},
};
vue3+vite 在vite.config.js中添加postcss配置
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import postcsspxtoviewport from "postcss-px-to-viewport";
export default defineConfig({
plugins: [vue()],
css: {
postcss: {
plugins: [
postcsspxtoviewport({
unitToConvert: "px",
viewportWidth: 750,
unitPrecision: 6,
propList: ["*"],
viewportUnit: "vw",
fontViewportUnit: "vw",
selectorBlackList: ["ignore-"],
minPixelValue: 1,
mediaQuery: true,
replace: true,
exclude: [],
landscape: false,
}),
],
},
},
});
2 · postcss-pxtorem 移动端适配 px转化为rem,配置后可以直接使用rem单位进行开发
vue3 / vue2
安装
npm i postcss-pxtorem@5.1.1 --save-dev
npm install amfe-flexible --save-dev
main.js 引入
import 'amfe-flexible'
配置 .postcssrc.js文件
module.exports = {
plugins: {
autoprefixer: {},
"postcss-pxtorem": {
rootValue: 37.5,
propList: ["*"],
selectorBlackList: [],
replace: true,
mediaQuery: false,
minPixelValue: 0,
},
},
};
vue3+ vite
安装
npm i postcss-pxtorem --save-dev
npm install amfe-flexible --save-dev
main.js 引入
import 'amfe-flexible'
配置 vite.config,js文件
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import postCssPxToRem from "postcss-pxtorem";
export default defineConfig({
plugins: [vue()],
css: {
postcss: {
plugins: [
postCssPxToRem({
rootValue: 37.5,
propList: ["*"],
}),
],
},
},
});