Retina螢幕，裝置畫素比，移動端的邊框在這些螢幕上1px  會表現處2px,3px畫素的寬度，所以出現各種解決方案，今天只總結一種，以後慢慢補充。。通過偽類 ::after。，原理就是通過transfrom:scaleX scale scaleY這幾個函式進行縮放，廢話不多說，直接擼程式碼，分別是：底邊，上邊，左邊，右邊，還有四個邊框都有，在文章末尾有相關知識的介紹連結，本文就不會浪費文字在這些方面了。

/*手機端實現真正的一畫素邊框*/
.border-1px, .border-bottom-1px, .border-top-1px, .border-left-1px, .border-right-1px {
   position: relative;
 }
/*線條顏色 黑色*/
.border-1px::after, .border-bottom-1px::after, .border-top-1px::after, .border-left-1px::after, .border-right-1px::after {
     background-color: #000; 

}

 /*底邊邊框一畫素*/
.border-bottom-1px::after {
     content:"";
     position: absolute; 
     left: 0;
     bottom: 0;
     width: 100%;
     height: 1px;
     transform-origin: 0 0;
 }

 /*上邊邊框一畫素*/
.border-top-1px::after {
   content:"";
    position: absolute; 
    left: 0;
    top: 0;
    width: 100%;
    height: 1px;
    transform-origin: 0 0;
}

 /*左邊邊框一畫素*/

/*右邊邊框1畫素*/
.border-right-1px::after {
          content: "";
          box-sizing: border-box;
          position: absolute; 
          right: 0;
          top: 0;
          width: 1px;
          height: 100%;
          transform-origin: 0 0;
 }

/*邊框一畫素*/
.border-1px::after {
  content: "";
  box-sizing: border-box;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border: 1px solid red;
}

/*裝置畫素比*/
@media only screen and (-webkit-min-device-pixel-ratio: 2.0), only screen and (min-resolution: 2dppx) {
    .border-bottom-1px::after, .border-top-1px::after {
      transform: scaleY(0.5);
    } 

   .border-left-1px::after, .border-right-1px::after {

       transform: scaleX(0.5);
    }
   .border-1px::after {
          width: 200%;
          height: 200%;
          transform: scale(0.5);
            transform-origin: 0 0;
     }
}

/*裝置畫素比*/
@media only screen and (-webkit-min-device-pixel-ratio: 3.0), only screen and (min-resolution: 3dppx) {
   .border-bottom-1px::after, .border-top-1px::after {
      transform: scaleY(0.333);
   }
   .border-left-1px::after, .border-right-1px::after {
     transform: scaleX(0.333);
   }
  .border-1px::after {
      width: 300%;
      height: 300%;
      transform: scale(0.333);
      transform-origin: 0 0;
  }
}

如果好奇其它的解決方案，可以去看另個部落格的文章：移動端1px解決方案

看來直接擼程式碼才是我的最愛