移动端1px问题的一种解决方案

因为retina视网膜屏幕的大量使用，使移动端产生了1px问题。设备像素比由原本的1变为1.5/2甚至是现在的3，都使移动端布局产生了更多的问题。

1. 物理像素和独立像素

大白话讲，一个物理像素就是一个发光的小灯泡；独立像素就是一个正常像素面积的大小，原本来说，一个独立像素只有一个发光的小灯泡，但是，随着苹果推出retina视网膜屏幕，使的原本一个独立像素面积的地方放了更多的小灯泡。

2. 设备像素比

设备像素比=物理像素/独立像素；也就是一个独立独立像素平均放置小灯泡的个数。如果你的iphone设备像素比为2的话，那么在一个独立像素的面积下就放置了两小灯泡。

3.带来的问题

问题就是：当我们在CSS代码里写border:1px;时，它实际上写的是一个物理像素，而在设备像素比为2的设备上，它显示的是2px。那么，如何让它在设备像素比不为1的设备上正常显示1像素呢？

4. 解决方案

这个1px边框的显示，用一个div伪类来代替，再用媒体查询设备像素比的方法，使用transform:scaleY(0.5)；来缩放（此处假设设备像素比为2）。

核心代码如下：

@mixin border-1px($color: rgba(7,17,27,0.2)){
  position:relative;
  &:after{
    display:block;
    position:absolute;
    left:0;
    bottom:0;
    content:'';
    width:100%;
    border-top:1px solid $color;
  }
}

以上是伪类的mixin

@media (-webkit-min-device-pixel-ratio: 1.5),(min-device-pixel-ratio: 1.5){
  .border-1px {
    &:after {
      -webkit-transform: scaleY(0.7);
      -moz-transform: scaleY(0.7);
      -ms-transform: scaleY(0.7);
      -o-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);
      -moz-transform: scaleY(0.5);
      -ms-transform: scaleY(0.5);
      -o-transform: scaleY(0.5);
      transform: scaleY(0.5);
    }
  }
}

@media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3){
  .border-1px {
    &:after {
      -webkit-transform: scaleY(0.3);
      -moz-transform: scaleY(0.3);
      -ms-transform: scaleY(0.3);
      -o-transform: scaleY(0.3);
      transform: scaleY(0.3);
    }
  }
}

这是设备像素比媒体查询的代码