关于移动端1px线处理和伪类组合使用

问题： 前端UI工程师有强迫症，非得把手机端的线条弄的最细。

分析：由于移动端页面普遍不允许缩放，所以设置viewport=1相关的scale也都设置为1，倒置在手机浏览器的显示时其实是有devicePixelRatio=2 或=3 这样的放大的，所以普通代码border=1px，在设备上实际上会显示为2px或3px。看上去确实比较粗壮。

解决：参考网上实现，最终选择了使用：before after伪类添加线条然后使用transform（）方法进行缩放。幸亏设计师的线条大多只有两个边框，要是4个都有则代码量和实现难度就大很多了。

发现：在使用伪类时发现 li:last-child:after{} 这样的伪类组合使用方式依然有效，后面测测兼容性怎么样：

参考网上部分方法： 链接为：http://www.cnblogs.com/lunarorbitx/p/5287309.html