retina屏 1px变宽问题的理解和解决方法

引出：这是移动端开发常遇到的问题，自己虽没做过移动端，但是感觉这是一个坑，所以记录下来，以后备用。

为什么border:1px看起来比1px要宽呢？网上查了一下发现，这里的2个1px实际含义是不一样的，viewport 的设置和屏幕物理分辨率是按比例而不是相同的. 移动端 window 对象有个 devicePixelRatio 属性, 它表示设备物理像素和 css 像素的比例, 在 retina 屏的 iphone 手机上, 这个值为 2 或 3, css 里写的 1px 长度映射到物理像素上就有 2px 或 3px 那么长.所以，因为Retine屏的分辨率始终是普通屏幕的2倍，1px的边框在devicePixelRatio=2的retina屏下会显示成2px，所以在高清瓶下看着1px总是感觉变胖了。
解决方法：
1.用小数来写px的值
1px=>0.5px;
2.border-image
3.background-image
4.多背景渐变实现
5.使用box-shadow模拟边框
6.viewport + rem 实现
7.伪类 + transform 实现