在设备像素比 （物理像素/逻辑像素）>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);
}
}
