设备像素比>1的移动设备上，1px问题

在设备像素比 （物理像素/逻辑像素）>1 的移动设备上，css 的1px 并不对应1物理像素，例如设备像素比为2的移动设备，1px高度的border，实际上占用了2物理像素的高。

现给出实际工作中一些适用解决方法，以设备像素比为2的设备举例

方法1 @media + border-image

.border_1px {

    border-bottom:1px solid #000; 

 } 

 @mediaonly 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 @media + background-image

.border_1px {

    border-bottom:1px solid #000; 

 } 

 @mediaonly screen and (-webkit-min-device-pixel-ratio:2){

     .border_1px {

        background: url(../img/1pxline.png) repeat-x left bottom;

        background-size: 100% 1px;

      }

 }

方法3  @media + 伪类 + transform

.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); 

     }

 }