常见 h5 布局为 rem 布局,项目中写宽高的时候需要将设计稿的尺寸在心里换算成 rem 输出,有些繁琐。使用postcss-pxtorem插件便可直接使用px,该插件自动将 px 单位转换为 rem。
安装
yarn add postcss-pxtorem -D
此插件是要和 postcss-loader 搭配使用的,没安装 postcss-loader 要安装下
yarn add postcss-loader -D
配置
rootValue // 看你项目中 rem 的设置,我们项目750宽度下根元素为50px,所以此处为100,在750设计稿下,则宽度为200px项目中直接写200px即可
propList // 需要做转化处理的属性,如`hight`、`width`、`margin`等,`*`表示全部
exclude // 因为项目庞大且中之前的代码是用rem写的,所以只将用.x.less写的新文件进行转换,不影响老代码
确实需要使用px的情况:
忽略单个属性的最简单方法是在像素单位声明中使用大写字母,将px写为Px 或 PX。 比如:
.ignore {
border: 1Px solid; // ignored
border-width: 2PX; // ignored
}
如是,便可以了。非常简单,动手操作下即可,不贴例子代码了。