摘要：通过配置规则和单位使用或来解决。其他关于我个人的一系列学习介绍及总结有兴趣可以参阅自学笔记一安装使用篇自学笔记二插件篇自学笔记二番外篇一自学笔记二番外篇二
利用PostCSS解决移动端REM适配问题
上一期有提到结合postcss-px2rem插件来处理移动端适配的方案，以及相关的避坑方法，之后总觉得这个解决方案问题太多，也就诞生了另一套方案运用postcss-pxtorem插件来进行处理。
那么这期番外篇讲的就是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宽，这里设置简单说明一下（没说的是我还没弄明白或者是不重要的?）：
rootValue为75，说是对根元素大小进行设置。可能类似px2rem中的remUnit参数吧
unitPrecision为5，起初我真不知道这个官方说的The decimal numbers to allow the REM units to grow to.是啥意思，搞了半天才观察出来，原来是转换成rem后保留的小数点位数。。。
propList是一个存储哪些将被转换的属性列表，这里设置为["*"]全部，假设需要仅对边框进行设置，可以写["*", "!border*"]意思是排除带有border的属性，当然这里会有一个问题，也许有时候不想对border其他样式处理例如border-radius所以也不是很好。
selectorBlackList则是一个对css选择器进行过滤的数组，比如你设置为["fs"]，那例如fs-xl类名，里面有关px的样式将不被转换，这里也支持正则写法。
minPixelValue是一个非常不错的选项，我设置了12，意思是所有小于12px的样式都不被转换，那么border之类的属性自然会保留px值了。而刚才提到的border-radius如果为了创造圆形等特殊较大圆弧时则还是会转换成rem，来配合对应的width和height（当然，你也可以用继承width或者height的变量来设置radius）。
需要注意的是，以下情况并不会保留为px！
.test-radius { width:20px; height:20px; border-radius: calc(@width / 2); background-color:#ccc; }根据反复测试，calc运算是来自cssnano插件，然而cssnano有必要放在最后执行，所以无法满足计算后的10px在进行pxtorem转换，不过这种情况也是比较合理的。假设width和height转换为rem，而圆角是px，个人感觉不可避免的会造成圆形错误的情况（是否有可能改圆角px值实际上永远大于转换后的rem的50%？有待考究！），所以这种情况暂时就不考虑了，让其单位均保持一致即可。
写到这里我又陷入了沉思，因为有个问题不明白了。根据postcss.config.js配置cssnano是在最后面，pxtorem是在其前面，那么如何做到对此段样式转换的顺序。
这段代码应该先是postcss-property-lookup对@width进行处理，然后进行calc(@width / 2)计算，最后对px检测转换，再进行cssnano压缩。而实际上有点诡异。难道postcss.config.js中插件的执行顺序并非单纯的从上而下！希望不久的将来这个疑问将被解决，或者我也怀疑postcss官方文档实际有指出，只是个人英文能力较差被我忽略掉了?。
另一方面，关于此段CSS在画圆上有一些需要注意的，其实这里如果写圆用50%即可，我发现某些情况下（可能是圆形很小）如果按照除以2的写法转换成rem似乎不圆，所以在现代开发来看移动端画圆就50%了！所以上例仅做测试好了~
额外阅读，关于border-radius的一些事项。
对了忘了说了，css样式代码中将px写成Px或者PX他也不会转换成rem的~
最后附上我实际应用场景的demo，仅供大家测试使用。
其他关于我个人的PostCSS一系列学习, 介绍及总结, 有兴趣可以参阅:
PostCSS自学笔记（一）【安装使用篇】
PostCSS自学笔记（二）【插件篇】
PostCSS自学笔记（二）【番外篇一】
PostCSS自学笔记（二）【番外篇二】
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/112494.html
摘要：之前有研究过做过假设，在插件列表中，的插件执行顺序自上而下，一切看起来似乎是没有任何问题的。再有摘自深入设计摘自写的姿势这两张图则应该是说明了我之前的假设，插件中的执行顺序自上而下。先来看看一片来自的这段会不会跟这个有关呢，我先埋个伏笔。 图解PostCSS的插件执行顺序 文章其实是一系列的早就写完了. 才发现忘了发在SegmentFault上面, 最早发布于https://gitee...
摘要：而则可制定个人需求的一套解决方案仅安装需要的插件。迫不及待的你已经等不及安装使用了吧。安装及使用一般是结合自动化工具使用，如果要单独使用可以安装，这里我先对的安装使用讲解下。接下来说点实际的，如何利用结合自动化工作在项目中使用。 PostCSS介绍 PostCSS是一个利用JS插件来对CSS进行转换的工具，这些插件非常强大，强大到无所不能。其中，Autoprefixer就是众多Post...
摘要：本期主要介绍以下几个插件和几个坑和坑这个就不用多说了，必装插件之一。看似写法没有任何问题。编译后的结果那么这样就没有问题了。 PostCSS常用插件介绍 继上一次PostCSS学习指南（一）后，渐渐开始在项目中应用。 这次决定主要讲解一些个人认为非常有帮助的PostCSS插件。 本期主要介绍以下几个插件和几个坑 autoprefixer postcss-partial-import...
摘要：一坑非常吃硬件，版本最低的硬件内存也是需要。之前进行环境开发，装的是虚拟机，但是虚拟机最高支持的内存是目前我的电脑是这样。三坑幸亏公司有多余的机器，让我来装一下系统。常见的盘启动制作，没有制作的，只能制作，很致命。 一、坑1 EOS非常吃硬件，v1.5版本最低的硬件内存也是需要7G。之前进行ubuntu环境开发，装的是虚拟机VMware Workstation Pro，但是虚拟机最高支...
摘要：在中怎么安装编者的电脑为位，因此以为例向大家展示的安装过程。第三步设置环境变量一般安装完成后，都会进行环境变量设置，目的是让系统能够找到和命令。生命不止，学习不休加油 他山之石，可以攻玉！欢迎关注我的微信公众号showImg(https://segmentfault.com/img/bVboaBO?w=129&h=129); 本文作为构建第一个Java程序的番外篇一，跟大家探讨下在Wi...
阅读 3488·2021-10-18 13:30
阅读 2943·2021-10-09 09:44
阅读 1966·2019-08-30 11:26
阅读 2292·2019-08-29 13:17
阅读 759·2019-08-29 12:17
阅读 2249·2019-08-26 18:42
阅读 473·2019-08-26 13:24
阅读 2953·2019-08-26 11:39
