移动端1px产生缘由及解决之道

产生缘由

    由于Retine屏的分辨率始终是普通屏幕的2倍，1px的边框在devicePixelRatio=2的retina屏下会显示成2px，因此在高清瓶下看着1px老是感受变胖了

解决之道

    1.在ios8+中当devicePixelRatio=2的时候使用0.5px

div{
     border:1px solid #000;
}    

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

    2.  transform: scale(0.5)

//下面是经过伪类实现的1px线条
.onePxHei(@borColor:#efefef,@borPx:1px){
  &:after{
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 2px;
    -webkit-transform: scale(1,.5);
    transform: scale(1,.5);
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    content: '';
    background-color: @borColor;
  }
}

    本人用的是less，这是mixin

    缺点：圆角没法实现，实现4条边框比较麻烦

    3.使用background-image

//经过background实现的1px，设置到dom自己，不会绘制padding和margin区域
.onePxBottomByBg(@borColor:#efefef,@borPx:1px){
  background-image: -webkit-linear-gradient(top, @borColor, @borColor 50%, transparent 50%);
  background-image: linear-gradient(180deg, @borColor, @borColor 50%, transparent 50%);
  background-size: 120% @borPx;
  background-repeat: no-repeat;
  background-position: bottom left;
  background-origin: content-box;
}

    优势：基本全部场景都能知足，包含圆角的button，单条，多条线     

    缺点：大量使用渐变可能致使性能瓶颈

总结：建议background-image+transform: scale(0.5)配合使用，优先使用缩放