移動端1px邊框問題

問題的原因：
因為Retine屏的解析度始終是普通螢幕的2倍，1px的邊框在devicePixelRatio=2的retina
屏下會顯示成2px，所以在高清瓶下看著1px總是感覺變胖了
解決方法： @media(-webkit-min-device-pixel-ratio:2)是指當時螢幕最小的色倍為2倍的
@media (-webkit-min-device-pixel-ratio: 2){
  .border-bottom::after {
     border-bottom-width: 1px;
  }
  .border:after {
    content: ' ';
    display: block;
    position: absolute;
    top: 0;
    right: -100%;
    bottom: -100%;
    left: 0;
    border: 0 solid #e1e1e1;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    pointer-events: none;
    -webkit-transform: scale(.5);
    transform: scale(.5);
    width: 200%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
   }
}
複製程式碼