javascript 开发语言 ecmascript vue3+vite+ts+element-plus解决pc移动端自适应

安装插件

pnpm i amfe-flexible

pnpm i postcss-pxtorem

main.ts引入

import "amfe-flexible/index.js";

项目根目录新建postcss.config.cjs文件，直接创建postcss.config.js会报错

module.exports = {

plugins: {

autoprefixer: {

overrideBrowserslist: [

"Android 4.1",

"iOS 7.1",

"Chrome > 31",

"ff > 31",

"ie >= 8",

"last 10 versions" // 所有主流浏览器最近10版本用

],

grid: true

},

"postcss-pxtorem": {

rootValue: 192, // 设计稿宽度的1/ 10

propList: ["*", "!border"], // 除 border 外所有px 转 rem

selectorBlackList: [".el-"], // 过滤掉.el-开头的class，不进行rem转换

exclude: ['node_modules']//主要是忽略掉element-plus的css变量

}

}

};

4.重启项目

好文阅读