移动端1px问题

由于UI要求的1px是指设备的物理像素1px，而在css中的像素其实是逻辑像素，可以使用window.devicePixelRatio来获取，所以在devicePixelRatio == 2 的时候，虽然border-width ：1px 描述的是设备独立像素，但是会被放大到2px 物理像素，所以会显得比较粗

1. border-image方案

.border-image-1px{
  border-width:1px 0px;
  border-image:url('xxx.png') 2 0 stretch 
// 重复（repeat）、拉伸（stretch）或铺满（round
}

2. transfor:scale(0.5)
   用媒体查询配合scale

/* 2倍屏 */
@media only screen and (-webkit-min-device-pixel-ratio: 2.0) {
    .border-bottom::after {
        -webkit-transform: scaleY(0.5);
        transform: scaleY(0.5);
    }
}

/* 3倍屏 */
@media only screen and (-webkit-min-device-pixel-ratio: 3.0) {
    .border-bottom::after {
        -webkit-transform: scaleY(0.33);
        transform: scaleY(0.33);
    }
}

3. background-image

.border {
      background-image:linear-gradient(180deg, red, red 50%, transparent 50%),
      linear-gradient(270deg, red, red 50%, transparent 50%),
      linear-gradient(0deg, red, red 50%, transparent 50%),
      linear-gradient(90deg, red, red 50%, transparent 50%);
      background-size: 100% 1px,1px 100% ,100% 1px, 1px 100%;
      background-repeat: no-repeat;
      background-position: top, right top,  bottom, left top;
      padding: 10px;
  }