因為retina視網(wǎng)膜屏幕的大量使用，使移動端產(chǎn)生了1px問題。設(shè)備像素比由原本的1變?yōu)?.5/2甚至是現(xiàn)在的3，都使移動端布局產(chǎn)生了更多的問題。

1. 物理像素和獨(dú)立像素

大白話講，一個物理像素就是一個發(fā)光的小燈泡；獨(dú)立像素就是一個正常像素面積的大小，原本來說，一個獨(dú)立像素只有一個發(fā)光的小燈泡，但是，隨著蘋果推出retina視網(wǎng)膜屏幕，使的原本一個獨(dú)立像素面積的地方放了更多的小燈泡。

2. 設(shè)備像素比

設(shè)備像素比=物理像素/獨(dú)立像素；也就是一個獨(dú)立獨(dú)立像素平均放置小燈泡的個數(shù)。如果你的iphone設(shè)備像素比為2的話，那么在一個獨(dú)立像素的面積下就放置了兩小燈泡。

3.帶來的問題

問題就是：當(dāng)我們在CSS代碼里寫border:1px;時，它實際上寫的是一個物理像素，而在設(shè)備像素比為2的設(shè)備上，它顯示的是2px。那么，如何讓它在設(shè)備像素比不為1的設(shè)備上正常顯示1像素呢？

4. 解決方案

這個1px邊框的顯示，用一個div偽類來代替，再用媒體查詢設(shè)備像素比的方法，使用transform:scaleY(0.5)；來縮放（此處假設(shè)設(shè)備像素比為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);
    }
  }
}

這是設(shè)備像素比媒體查詢的代碼