有时候我们切的图总是不像UI给的图一样精美， 例如这个1像素边框和下划线问题
因在我们的移动端中css最小1px其实映射为物理像素有2px或3px
可以去了解一下viewport， 在此只给出一种方便的解决方案
/* the start of 1px border */
.border-1px {
position: relative;
}
.border-1px:after {
content: '';
position: absolute;
top: 0;
left: 0;
border: 1px solid #000000;
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-transform-origin: left top;
transform-origin: left top;
}
@media (min-device-pixel-ratio: 1.5),(-webkit-min-device-pixel-ratio: 1.5) {
.border-1px:after {
width: calc(100% / 0.7);
height: calc(100% / 0.7);
-webkit-transform: scale(0.7);
transform: scale(0.7);
}
}
@media (min-device-pixel-ratio: 2),(-webkit-min-device-pixel-ratio: 2) {
.border-1px:after {
width: 200%;
height: 200%;
-webkit-transform: scale(0.5);
transform: scale(0.5);
}
}
/* the end of 1px border */
