移动端1px边框问题的3种解决方法

一、起因：

　　按照iPhone6的尺寸,一张750px宽的设计图，这个750px其实就是iPhone6的设备像素，在测量设计图时量到的1px其实是1设备像素，而当我们设置布局视口等于理想视口等于375px，并且由于iPhone6的DPR为2，写css时的1px对应的是2设备像素，所以看起来会粗一点。

二、解决方法：

　　1.border-image

　　　　基于media查询判断不同的设备像素比给定不同的border-image

.border_1px{
          border-bottom: 1px solid #000;
        }
@media only screen and (-webkit-min-device-pixel-ratio:2){
      .border_1px{
             border-bottom: none;
             border-width: 0 0 1px 0;
             border-image: url(../img/1pxline.png) 0 0 2 0 stretch;
          }
     }

　　2.background-image

　　　　和border-image类似，准备一张符合条件的边框背景图，模拟在背景上

.border_1px{
          border-bottom: 1px solid #000;
        }
@media only screen and (-webkit-min-device-pixel-ratio:2{
　　　　.border_1px{
        　　　　background: url(../imges/1px.png) repeat-x left bottom;
       　　　　 background-size: 100% 1px;
            }
        }

　　　上面两种都需要单独准备图片，而且圆角不是很好处理，但是可以应对大部分场景。

　　3.伪类 + transform

　　　　基于media查询判断不同的设备像素比对线条进行缩放

.border_1px:before{
          content: '';
          position: absolute;
          top: 0;
          height: 1px;
          width: 100%;
          background-color: #000;
          transform-origin: 50% 0%;
        }
        @media only screen and (-webkit-min-device-pixel-ratio:2){
            .border_1px:before{
                transform: scaleY(0.5);
            }
        }
        @media only screen and (-webkit-min-device-pixel-ratio:3){
            .border_1px:before{
                transform: scaleY(0.33);
            }
        }

　　　　这种方式可以满足各种场景，如果需要满足圆角，只需要给伪类也加上border-radius即可。