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)完成。重启项目。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容