Retina屏实现1px边框

问题描述

通常我们实现边框的方法都是设置1px的边框，但是在retina屏上因为设备像素比的不同，边框在移动设备上的表现也不相同，例如在devicePixelRatio = 2的retina屏下会显示成2px。这对于拥有像素眼的设计同事来说是无法忍受的，他们会一眼看出这边框粗了很多(真可怕，不过经历这次问题之后，感觉自己也练成了像素眼)，并且在用户体验上略差，所以现在要解决的问题就是在retina屏幕下实现1px的边框。

解决方案

查找了一些资料，也对比了很多方案，个人认为这个是css的问题，所以尽量不使用js来协助较好。但是可能会有局限。下面就列举一些方案，并对比下优劣。

 1.IOS8+已经支持0.5px了，所以，可以使用media query+0.5px来解决这类问题：

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

不支持0.5px的ios7及安卓，会显示为0px,所以对于这些系统需要另外写样式。这个方案支持圆角。

2.对于devicePixelRatio >= 2的设备，在需要加边线的元素上使用after伪元素，尺寸设置为1px,然后使用transform:scale进行缩小0.5倍操作：

.border-bottom1px {
    position: relative
}
.border-bottom1px:after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    -webkit-transform-origin: 0 bottom;
    transform-origin: 0 bottom;
    background: #d7d6dc
}
@media(-webkit-min-device-pixel-ratio:2) {
    .border-bottom1px:after {
        -webkit-transform: scaleY(.5);
        transform: scaleY(.5)
    }
}

这个方案实现单条边线较合适，多条边线伪元素不够用。并且不能实现圆角边框。并且代码相对较多较分散，维护不易。

3.box-shadow

.border-bottom1px{
    -webkit-box-shadow:0 1px 1px -1px rgba(0, 0, 0, 0.5);
}

这个方案可以实现圆角，可以实现多边框，

但是在某些机器上有阴影，很影响美观，所以一般不用。简单边框还是用2比较合适。

4.background-image

用css设置1px的image,50%透明，50%带有颜色：

.border-1px {
      background-image:linear-gradient(180deg, red, red 50%, transparent 50%),
      linear-gradient(270deg, red, red 50%, transparent 50%),
      linear-gradient(0deg, red, red 50%, transparent 50%),
      linear-gradient(90deg, red, red 50%, transparent 50%);
      background-size: 100% 1px,1px 100% ,100% 1px, 1px 100%;
      background-repeat: no-repeat;
      background-position: top, right top,  bottom, left top;
      padding: 10px;
  }

可以实现单条或多条边框，圆角不能实现

5.图片

需要多加载一张图片，另外边框颜色修改的时候需要更换图片，一般不使用这个方法。

6.viewport+rem

在devicePiexlRatio=2情况下设置meta:

<meta name="viewport" content="initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no">

再设置rem:

html {
    font-size: 20px;
}
header {
    height: 3rem;
}

将边线宽换成rem就可以。

js协助的方法类似，使用js判断UA，看是否是ios8+,是的话添加一个类。