如何解决移动端Retina屏1px像素的问题？（5种）

[GGXXMM]

一、0.5px边框（使用@media）

p{
    border:1px solid #000;
}

@media (-webkit-min-device-pixel-ratio: 2) {
     p{
         border:0.5px solid #000;
     }
}
@media (-webkit-min-device-pixel-ratio: 3) {
     p{
         border:0.333333px solid #000;
     }
}

二、background-image

.background-image-1px {
   background: url(../img/line.png) repeat-x left bottom;
   -webkit-background-size: 100% 1px;
   background-size: 100% 1px;
}

三、box-shadow

.box-shadow-1px {
   box-shadow: inset 0px -1px 1px -1px #c8c7cc;
}

四、伪类+transform

原理是把原先元素的 border 去掉，然后利用 :before 或者 :after 重做 border ，并 transform 的 scale 缩小一半，原先的元素相对定位，新做的 border 绝对定位。

.scale-1px{ 
  position: relative; 
  border:none; 
}
.scale-1px:after{    
  content: '';    
  position: absolute; 
  bottom: 0;    
  background: #000;    
  width: 100%; height: 1px;    
  -webkit-transform: scaleY(0.5);    
  transform: scaleY(0.5);     
  -webkit-transform-origin: 0 0;    
  transform-origin: 0 0; 
}

五、viewport+rem

同时通过设置对应viewport的rem基准值，这种方式就可以像以前一样轻松愉快的写1px了。在devicePixelRatio = 2 时，输出viewport：

<meta name="viewport" content="initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no">

原理：参考使用flexible实现