2023年了，还在手动px转rem吗？

px-to-rem

使用amfe-flexible和postcss-pxtorem在webpack中配置px转rem

npm i amfe-flexible -Snpm i postcss-pxtorem -D

在main.js中

import flexible from 'amfe-flexible' 
Vue.use(flexible);

index.html中

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">

vue.config.js 或 webpack.config.js

module.exports = {	css: {loaderOptions: {postcss: {plugins: [require('postcss-pxtorem')({ // 把px单位换算成rem单位rootValue: 192.0,//rootValue根据设计稿宽度除以10进行设置，这边假设设计稿为1920，即rootValue设为192.0；unitPrecision: 5,propList: ['*'],// selectorBlackList: ['el-',], //replace: true,mediaQuery: false,minPixelValue: 0})]}}}
};

px-to-vw

使用postcss-px-to-viewport插件

1. 在项目根目录下添加.postcssrc.js文件

module.exports = {plugins: {autoprefixer: {}, // 用来给不同的浏览器自动添加相应前缀，如-webkit-，-moz-等等"postcss-px-to-viewport": {unitToConvert: "px", // 要转化的单位viewportWidth: 750, // UI设计稿的宽度unitPrecision: 6, // 转换后的精度，即小数点位数propList: ["*"], // 指定转换的css属性的单位，*代表全部css属性的单位都进行转换viewportUnit: "vw", // 指定需要转换成的视窗单位，默认vwfontViewportUnit: "vw", // 指定字体需要转换成的视窗单位，默认vwselectorBlackList: ["wrap"], // 指定不转换为视窗单位的类名，minPixelValue: 1, // 默认值1，小于或等于1px则不进行转换mediaQuery: true, // 是否在媒体查询的css代码中也进行转换，默认falsereplace: true, // 是否转换后直接更换属性值exclude: [/node_modules/], // 设置忽略文件，用正则做目录名匹配landscape: false // 是否处理横屏情况}}
};

写在最后：欢迎关注扫码作者微信公众号fever code，获取一手技术分享⛽️