Vue3.0移动端页面适配屏幕pxtorem(自动将px转化为rem)

(1)安装postcss-pxtorem

`npm install postcss-pxtorem -D`

(2) 安装 postcss、 postcss-loader、amfe-flexible

  `npm install postcss  postcss-loader amfe-flexible --save`

(3) 在main.js中引入amfe-flexible

 `import 'amfe-flexible'`

(4) 配置,创建postcss.config.js文件

```

module.exports = {

plugins: {

    "postcss-pxtorem": {

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

            "propList": ["*"]// 需要做转化处理的属性,如`hight`、`width`、`margin`等,`*`表示全部

      }

   }

}

```

(5)完成。重启项目。

你可能感兴趣的:(Vue3.0移动端页面适配屏幕pxtorem(自动将px转化为rem))