移动端1px像素问题及其解决方案

原因：
由于不同的手机有不同的像素密度导致的。如果移动显示屏的分辨率始终是普通屏幕的2倍，1px的边框在devicePixelRatio=2的移动显示屏下会显示成2px，所以在高清瓶下看着1px总是感觉变胖了

解决方法：
1.在ios8+中当devicePixelRatio=2的时候使用0.5px

p{

    border:1px solid #000;

}

@media (-webkit-min-device-pixel-ratio: 2) {

     p{

         border:0.5px solid #000;

     }

}

2.伪元素 + transform 实现
对于老项目伪类+transform是比较完美的方法了。

原理是把原先元素的 border 去掉，然后利用 :before 或者 :after 重做 border ，并 transform 的 scale 缩小一半，原先的元素相对定位，新做的 border 绝对定位。

单条border样式设置：
.scale-1px{ position: relative; border:none; }
.scale-1px:after{   
 content: '';   
 position: absolute;
 bottom: 0;    
 background: #000;  
 width: 100%; height: 1px;   
 -webkit-transform: scaleY(0.5);    transform: scaleY(0.5);    
 -webkit-transform-origin: 0 0;    transform-origin: 0 0; 
 }
优点：所有场景都能满足，支持圆角(伪类和本体类都需要加border-radius)
缺点：对于已经使用伪类的元素(例如clearfix)，可能需要多层嵌套

三，viewport + rem
实现这种兼容方案相对比较完美，适合新的项目，老的项目修改成本过大。

在devicePixelRatio = 2 时，
设置viewport：
<meta name="viewport" content="initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no">

在devicePixelRatio = 3 时，
设置viewport：
<meta name="viewport" content="initial-scale=0.3333333333333333, maximum-scale=0.3333333333333333, minimum-scale=0.3333333333333333, user-scalable=no">

优点：所有场景都能满足，一套代码，可以兼容基本所有布局
缺点：老项目修改代价过大，只适用于新项目

四，使用box-shadow模拟边框

利用css 对阴影处理的方式实现0.5px的效果

样式设置：

.box-shadow-1px {

box-shadow: inset 0px -1px 1px -1px #c8c7cc;

}

优点：代码量少，可以满足所有场景
缺点：边框有阴影，颜色变浅

参考：https://www.jianshu.com/p/3a262758abcf