移动端（手机）实现1像素下边框的方法

由于分辨率 DPI 的差异，高清手机屏上的 1px 实际上是由 2×2 个像素点来渲染，有的屏幕甚至用到了 3×3 个像素点

所以 border: 1px 在移动端会渲染为 2px 的边框

虽然用户在实际使用的时候，很难发现这 1px 的差异，但是设计师往往会在这 1px 上较劲，这就产生了经典的 “一像素问题”。

关于设备像素比的知识，想必做过移动端开发的都有接触，这里就不介绍啦，万一有不懂的可以看张鑫旭大神的设备像素比devicePixelRatio简单介绍。

所以我的解决办法是，先用伪类元素实现1px 边框（这时如果渲染在 DPR为2的手机上，显然是2px） 然后利用媒体查询和‘min-device-pixel-ratio’轻松搞定。

 

scss代码如下： 

border-1px($color)
  position: relative;
  &:after
    display: block;
    position:absolute;
    left: 0;
    bottom: 0;
    width:100%;
    border-top: 1px solid $color;

    content: '';

}

@media (-webkit-min-device-pixel-ratio: 1.5),(min-device-pixel-ratio: 1.5)
  .border-1px
   &::after
      -webkit-transform: scaleY(0.7)
      transform: scaleY(0.7)

@media (-webkit-min-device-pixel-ratio: 2),(min-device-pixel-ratio: 2)
  .border-1px
    &::after
      -webkit-transform: scaleY(0.5)
      transform: scaleY(0.5)

html中： 

<div class="tab border-1px">
</div

使用

.tab {

    border-1px(#ccc);
}

这样就可以实现移动端真正的1像素边框了，这里是下边框，可以用伪类：before 实现上边框。