使用PostCSS解决移动端REM适配问题上一期提到使用postcss-px2rem插件处理移动端适配解决方案，以及相关的陷阱避免方法。后来总觉得这个方案问题太多，又诞生了一个使用postcss-pxtorem插件进行处理的方案。所以这一集就是讲postcss-px2rem和postcss-pxtorem的优缺点。题外话，其实我很好奇，为什么postcss-px2rem没有被列入PostCSS插件列表，是不是索引器认为postcss-pxtorem可以代替它？不过，两者各有优缺点，就看开发者的喜好了。因为之前对postcss-px2rem的使用和可能出现的问题说的太多了，所以这次主要介绍一下postcss-pxtorem（截至2017年8月30日，我试图找到该插件的中文资料，但是没有根本）。基本功能和一些个人感受。首先，我们使用这个插件是为了雷姆世界的统治。但是有些场景不适合，比如1px的边框问题，我们希望不要转换这个边框。（之前说过文字大小不建议转换为rem，目前前端开发环境下实在找不到有力的证据来保留字号的px值，这里就不做了.)这两个插件处理忽略某些样式的转换方法怎么样？postcss-px2rem通过注解解决。postcss-pxtorem通过配置规则和单位使用Px或PX来解决。另外，这两个插件有什么优势呢？postcss-px2rem可以根据不同的dpr值生成多个选择器，官方主要用于字体大小适配。和多个版本的css文件。postcss-pxtorem有强大的转换规则来适应不同的场景，下面会详细介绍。所以个人现在倾向于使用postcss-pxtorem。至于有没有坑，还有待研究。接下来介绍下postcss-pxtorem的用法。使用postcss-pxtorem避免了postcss嵌套注释的问题。具体配置大致如下require('postcss-pxtorem')({rootValue:75,unitPrecision:5,propList:['*'],selectorBlackList:[],replace:true,mediaQuery:false,minPixelValue:12})假设设计稿是750宽，这里简单说明一下设置（我没说的是没弄明白还是不重要？）：rootValue是75，意思是设置尺寸的根元素。可能类似于px2rem中的remUnit参数。unitPrecision是5，一开始真不知道官方说的是让REM单位增长到的十进制数。要保留的小数位数。..propList是将要转换的属性列表。这里设置为['*']all。假设只需要设置border，可以写['*','!border*']来排除borders属性，当然这里会有问题，可能有时候不想处理其他borderborder-radius之类的样式，所以不是很好。selectorBlackList是一个用于过滤css选择器的数组。比如你设置为['fs']，那么比如fs-xl类名，px相关的样式不会转换，这里也支持正写。minPixelValue是一个很好的选择。我设置为12，也就是说所有小于12px的样式都不会被转换，所以border等属性自然会保留px值。而刚才说的border-radius如果是创建一个特殊的大圆弧比如圆，还是会转换为rem，来匹配对应的width和height（当然你也可以使用继承自width或者height的变量来设置半径）。需要注意的是以下情况不会保留为px！.test-radius{宽度：20px;高度：20px；边界半径：calc(@width/2);background-color:#ccc;}根据反复测试，calc操作来自cssnano插件，但是cssnano必须放在最后执行，所以不能满足pxtorem转换中计算出的10px，但是这种情况是很合理。假设宽高换算为rem，圆角为px，个人感觉难免会出现舍入误差（可不可以把圆角的px值改成实际总是大于50%转换后的rem？有待研究！），所以这种情况暂时不考虑，保持单位一致即可。写到这里，我又陷入了深思，因为有一个问题没有搞明白。根据postcss.config.js的配置，cssnano在最后，pxtorem在前面，那么本节如何实现样式转换的顺序。这段代码应该先通过postcss-property-lookup处理@width，然后进行calc(@width/2)计算，最后进行px检测转换，再进行cssnano压缩。实际上有点奇怪。难道postcss.config.js中plugins的执行顺序不是简单的从上到下！希望这个问题能在不久的将来得到解决，或者我也怀疑官方的postcss文档居然指出只是我的英文能力差被我无视了？另一方面，在这一段CSS中画圆也有一些需要注意的地方。其实在这里写个圈，就可以用50%。我发现在某些情况下（可能圆很小），如果除以2转换成rem好像不是圆的，所以在现代开发中，在移动端画圆是50%！所以上面的例子只是为了测试~补充阅读，关于border-radius的一些东西。对了，忘了说，如果px在css样式代码中写成Px或者PX，是不会转成rem的~最后附上我实际应用场景的demo，仅供大家测试.其他关于我个人PostCSS的系列学习、介绍和总结，有兴趣的可以参考：PostCSS自学笔记（一）【安装与使用】PostCSS自学笔记（二）【插件】PostCSS自学笔记（二）【外篇一】PostCSS自学笔记（二）【专题二】
