移动端1px border

< div class= "border-bottom-1px border-1px" >

aaa

</ div >

/* 缩放 */

@media ( -webkit-min-device-pixel-ratio: 1.5),

( -webkit-min-device-pixel-ratio: 1.5) {

.border-1px :after {

-webkit-transform: scaleY( 0.7);

transform: scale( 0.7);

}

}

@media ( -webkit-min-device-pixel-ratio: 2),

( -webkit-min-device-pixel-ratio: 2) {

.border-1px :after {

-webkit-transform: scaleY( 0.5);

transform: scale( 0.5);

}

}

/* 1px的border */

.border-bottom-1px {

position: relative;

}

.border-bottom-1px:after {

display: block;

position: absolute;

width: 100%;

left: 0;

bottom: 0;

border-top: 1px solid red;

content: " "; /* 空白字符 */

}