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

1、安装 postcss-pxtorem

$ npm install postcss-pxtorem -D

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

找到 plugins 属性新增pxtorem的设置

"postcss-pxtorem": { "rootValue": 32, "propList": ["*"] }

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

例如设计给出的设计图是 750 * 1136，那么可以直接在页面中写

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

将被转换为

body { widht: 23.4375rem; height: 35.5rem; }

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

猜你喜欢