postcss 单独不转换_PostCSS自学笔记（二）【番外篇一】

PostCSS自学笔记(二)【番外篇一】

上一期有提到结合postcss-px2rem插件来处理移动端适配的方案，以及相关的避坑方法，之后总觉得这个解决方案问题太多，也就诞生了另一套方案

那么这期番外篇讲的就是postcss-px2rem和postcss-pxtorem的利弊了。

题外话，其实我也很好奇，为什么postcss-px2rem没有被收录在PostCSS插件列表中，难道是因为收录者认为postcss-pxtorem可以取代它？不过两者各有利弊，就看开发者的喜好了。

因为之前关于postcss-px2rem使用方法和可能存在的问题说的太多了，这次主要介绍postcss-pxtorem(截至2017年8月30日，我试过查找关于该插件的中文资料，完全没有)的基本功能和个人使用一些感受。

首先，我们用这个插件为了就是要rem统治世界。然而，有些场景并不合适，比如1px边框问题，我们希望并不转换这个边框。(以前都说文字大小不建议转换rem，我实在找不到有力证据在当前前端开发环境下保留字体大小的px值，因此此处不做处理)

这两个插件处理忽略某些样式的转换方式是怎样的呢？

postcss-px2rem通过注释解决。

postcss-pxtorem通过配置规则和单位使用Px或PX来解决。

另外，这两个插件各有什么优势呢？

postcss-px2rem可以生成根据dpr值不同的多个选择器，官方主要用它来做字体大小的适配。以及多个版本的css文件。

postcss-pxtorem则有强大的转换规则来适应不同的场景，下文将进行详细介绍。

因此个人现在倾向于使用postcss-pxtorem，至于是否有坑，还有待考究。接下来，开始介绍以下postcss-pxtorem的使用方法。

采用postcss-pxtorem避免了postcss-nested注释问题,具体配置大致如下

require("postcss-pxtorem")({

rootValue: 75,

unitPrecision: 5,

propList: ["*"],

selectorBlackList: [],

replace: true,

mediaQuery: false,

minPixelValue: 12

})

假设设计稿750宽，这里设置简单说明一下(没说的是我还没弄明白或者是不重要的