上一期有提到结合postcss-px2rem插件来处理移动端适配的方案,以及相关的避坑方法,以后总以为这个解决方案问题太多,也就诞生了另外一套方案运用postcss-pxtorem插件来进行处理。javascript
那么这期番外篇讲的就是postcss-px2rem和postcss-pxtorem的利弊了。css
题外话,其实我也很好奇,为何postcss-px2rem没有被收录在PostCSS插件列表中,难道是由于收录者认为postcss-pxtorem能够取代它?不过二者各有利弊,就看开发者的喜爱了。前端
由于以前关于postcss-px2rem使用方法和可能存在的问题说的太多了,此次主要介绍postcss-pxtorem(截至2017年8月30日,我试过查找关于该插件的中文资料,彻底没有)的基本功能和我的使用一些感觉。java
首先,咱们用这个插件为了就是要rem统治世界。然而,有些场景并不合适,好比1px边框问题,咱们但愿并不转换这个边框。(之前都说文字大小不建议转换rem,我实在找不到有力证据在当前前端开发环境下保留字体大小的px值,所以此处不作处理)git
这两个插件处理忽略某些样式的转换方式是怎样的呢?github
postcss-px2rem经过注释解决。web
postcss-pxtorem经过配置规则和单位使用Px
或PX
来解决。npm
另外,这两个插件各有什么优点呢?segmentfault
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宽,这里设置简单说明一下(没说的是我还没弄明白或者是不重要的?):
['*']
所有,假设须要仅对边框进行设置,能够写['*', '!border*']
意思是排除带有border的属性,固然这里会有一个问题,也许有时候不想对border其余样式处理例如border-radius
因此也不是很好。['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一系列学习, 介绍及总结, 有兴趣能够参阅: