移动端1px问题

移动端1px问题

1px的边框，在高清屏下，移动端的1px会变得很粗。

为什么会产生这个问题？主要跟DPR（devicePixelRatio）设备像素比有关，它是默认缩放为100%的情况下，设备像素和CSS像素的比值。

window.devicePixelRatio=物理像素/CSS像素

目前主流屏幕的DPR=2（iPhone8）或者3（iPhone8 Plus）。

拿2倍屏来说，设备的物理像素要实现1像素，而DPR=2。按照上述公式，那么CSS像素只能是0.5。

一般设计稿是按照750来设计的，它上面的1px是以750来参照的，而我们写CSS样式是以设备375为参照的，所以我们应该写0.5px。

解决方案：

1、WWDC对iOS统一给出的方案

在WWDC大会上，给出来了1px的方案，当写0.5的时候，就会显示一个物理像素宽度的border，而不是一个CSS像素的border。所以在iOS下，你可以写成：

border: 0.5px soild red

为什么在3倍屏下，不是0.3333px这样的？因为，在Chrome上模拟iPhone8 Plus，发现小于0.46px的时候是显示不出来的。

优点：

• 简单， 没有副作用

缺点：

• 支持iOS 8+，不支持安卓。后期安卓follow就好了。

2、使用边框图片

border: 1px solid red;
border-image: url('xxx.jpg') 2 repeat;

优点：

• 没有副作用

缺点:

• border颜色变了就得重新制作图片；圆角会比较模糊。

3、使用 box-shadow实现

box-shadow: 0 -1px 1px -1px red, //上边线
            1px 0 1px -1px red, // 右边线
            0 1px 1px -1px red, // 下边线
            -1px 0 1px -1px red; // 左边线

优点:

• 使用简单，圆角也可以实现

缺点:

• 模拟的实现方法，仔细看可以看出这是阴影而不是边框

4、使用伪元素

1条border：

.setOnePx{
  position: relative;
  &::after{
    position: absolute;
    content: '';
    background-color: #e5e5e5;
    display: block;
    width: 100%;
    height: 1px; /*no*/
    transform: scale(1, 0.5);
    top: 0;
    left: 0;
  }
}

4条border：

.setBorderAll{
     position: relative;
       &:after{
           content:" ";
           position:absolute;
           top: 0;
           left: 0;
           width: 200%;
           height: 200%;
           transform: scale(0.5);
           transform-origin: left top;
           box-sizing: border-box;
           border: 1px solid #E5E5E5;
           border-radius: 4px;
      }
    }

优点：

• 全机型兼容，实现了真正的1px，而且可以圆角

缺点：

• 暂用了after伪元素，可能影响清除浮动