背景
不知道有没有小伙伴遇到过这个问题，webpack配置了px2rem之后，老项目有的border写的是1px solid xxx;这种写法写的描边在安卓部分手机上描边消失了，但是在iOS手机上只是表现为描边变细了。
这是什么原因呢？
打开chrome查看元素我们可以发现，实际border还在，只是1px被转换为非常小的rem数值了。如果页面刚好使用了手淘的flexible，部分安卓的显示就会出现不展示border的情况。
如何解决
如果继续用px2rem-loader必然还得要面对这个问题，有这样几个解决方案。
- 第一种方案，把
1px替换为1Px，这样就不会被转换了，也是网上最容易搜到的一种解决方案。 - 第二种方案，把带有1px的语句后面加上注释，这也是官方推荐的方式
border: 1px solid #ddd; /*no*/
但是以上两种方式有个致命的缺点，当你的项目是团队开发的时候，如果你的团队成员不知道有这个情况，把你之前全局替换过的1Px给你改了，或者就是正常写1px solid #ddd;忘记了要改字母或者加注释，这可怎么办？老项目已经写了那种写法，我又想兼容怎么办？
重点来了！
- 第三种解决方案，使用
px2rem-webpack-loader插件。一步去根彻底搞定问题, 没有什么比用loader处理更有效的方案了。 npm地址：www.npmjs.com/package/px2… 只要在之前配置loader的地方添加一句话就可以不再编译1px了。
下面这个是个截图，想黏贴的话去npm地址里面用就可以了。
结束语
虽然转1px这种事情是小事，有的团队甚至使用定位等方式模拟0.5px、px，但现实1px还是有它的用途的。希望该插件能解决阅读者的问题。
