最近在用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… 处获得。