Vue项目自动转换px为rem

1,977 阅读1分钟

最近在用Vue-cli2.x 开发移动端的项目,项目中使用postcss-pxtorem将px自动转换成rem。

配置postcss-pxtorem 自动转换px为rem

1. 安装 postcss-pxtorem

npm i postcss-pxtorem -D

2. 修改根目录的 .postcssrc.js 文件

找到 plugins 属性新增 pxtorem 的设置

    'postcss-pxtorem': {
      //根元素字体大小
      rootValue: 37.5,
      //px转换为rem的属性
      propList: ['*']
    }

按照上述配置后,即可在开发中直接使用px 单位开发。

例如设计稿是 750 * 1136,那么可以直接在页面中写

// input
body {
	width: 750px;
	height: 1136px;
}

将被转换为

// output
body {
	width: 20rem;
	height: 30.29333rem;
}

更多的配置项,详见postcss-pxtorem官方文档:www.npmjs.com/package/pos…

注意:此方法支持import 和 .vue单文件中style。暂不支持style中使用@import url();

可能遇到的坑:如果个别地方不想转化px。可以简单的使用大写的 PX 或 Px 。

文档协议

知识共享许可协议
teachat 的文档库teachat 采用 知识共享 署名-非商业性使用-相同方式共享 4.0 国际 许可协议进行许可。
本许可协议授权之外的使用权限可以从 creativecommons.org/licenses/by… 处获得。