在Reina（视网膜）屏幕的手机上使用CSS设置的1px的边框实际会比视觉稿粗很多。在之前的项目中UI告诉我说我们移动项目中的边框全部都变粗了，UI把他的设计稿跟我的屏幕截图跟我看居然真的不一样。没有办法只有在后面的版本中去修改了，但是要改的话需要知道是为什么。所以查了很多资料终于搞懂了这个问题，并且总结了几种方法
其实这个原因很简单，因为css中的1px并不等于移动设备的1px这些由于不同的手机有不同的像素密度。茬window对象中有一个devicePixelRatio属性他可以反应css中的像素与设备的像素比。
解决边框变粗的6种办法
额的神呐！so easy! 果真如此吗
这样还不够（WWDC幻灯片通常是“唬人”的），但是相差不多
问题是 retina 屏的浏览器可能不认识0.5px的边框，将会把它解释成0px没有边框。包括 iOS 7 和之前版本OS X Mavericks 及以前版本，还有 Android 設备
解决方案是通过 JavaScript 检测浏览器能否处理0.5px的边框，如果可以给html标签元素添加个class。
然后极细的边框样式就容易了：
- 简单，不需要过多玳码
- 无法兼容安卓设备、 iOS 8 以下设备。
上文是把border设置在边框的底部所以使用的图片是2px高，上部的1px颜色为透明下部的1px使用视觉规定的border的顏色。如果边框底部和顶部同时需要border可以使用下面的border-image：
到目前为止，我们已经能在iphone上展现1px border的效果了但是我们发现这样的方法在非视网膜屏上会出现border显示不出来的现象，于是使用Media Query做了一些兼容样式设置如下：
- 可以设置单条,多条边框
- 修改颜色麻烦, 需要替换图片
- 圆角需要特殊处理，并且边缘会模糊
background-image 跟border-image的方法一样你要先准备一张符合你要求的图片。然后将边框模拟在背景上
- 可以设置单条,多条边框
- 修改颜色麻烦, 需要替换图片
- 圆角需要特殊处理，并且边缘会模糊
与background-image方案类似只是将图片替换为css3渐变。设置1px的渐变背景50%有颜色，50%透明
- 可以实现單条、多条边框
- 多背景图片有兼容性问题
利用css 对阴影处理的方式实现0.5px的效果
这种兼容方案相对比较完美，适合新的项目老的项目修改成夲过大。
对于这种方案可以看看
- 一套代码，可以兼容基本所有布局
- 老项目修改代价过大只适用于新项目
对于老项目，有没有什么办法能兼容1px的尴尬问题了个人认为伪类+transform是比较完美的方法了。
单条border样式设置：
最好在使用前也判断一下结合 JS 代码，判断是否 Retina 屏：
