解决移动端1px问题

1. 出现的缘由

因为不一样的手机有不一样的像素密度致使的。若是移动显示屏的分辨率始终是普通屏幕的2倍，1px的边框在devicePixelRatio=2的移动显示屏下会显示成2px，因此在高清瓶下看着1px老是感受变胖了

2. 解决方法

一．在ios8+中当devicePixelRatio=2的时候使用0.5px

border:1px solid #000;
}
@media (-webkit-min-device-pixel-ratio: 2) {

     p{
         border:0.5px solid #000;
     }
}

二，伪元素 + transform 实现

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

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

单条border样式设置：

.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：

在devicePixelRatio = 3 时，输出viewport：

优势：全部场景都能知足，一套代码，能够兼容基本全部布局

缺点：老项目修改代价过大，只适用于新项目

四，使用box-shadow模拟边框

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

样式设置：

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

}

优势：代码量少，能够知足全部场景 缺点：边框有阴影，颜色变浅