移动端 1像素边框

.border-1{
    position: relative;
    &:after{
        position: absolute;
        left: 0;
        bottom: 0;
        transform: scaleY(.5);
        width: 100%;
        height: 1px;
        content: '';
        background: red;
    }
}

/* 2x */
@media only screen and (-webkit-min-device-pixel-ratio: 2.0) {
    .border::after {
        transform: scaleY(.5);
    }
}

/* 3x */
@media only screen and (-webkit-min-device-pixel-ratio: 3.0) {
    .border::after {
        transform: scaleY(.33);
    }
}