CSS 技巧

移动端

1px border

DPR = 设备像素 / CSS像素(某一方向上)

@media (min-device-pixel-ratio: 1.5) {
    .border-1px{
        &::after{
            transform: scaleY(0.7);
        }
    }
}
@media (min-device-pixel-ratio: 2) {
    .border-1px{
        &::after{
            transform: scaleY(0.5);
        }
    }
}

.border-1px(@color) {
    position: relative;
    &:after {
        display: block;
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        border-top: 1px solid @color;
        content: ' ';
    }
}

@import "./common/styles/mixin";
...
        .border-1px(rgba(7, 17, 27, 0.1));
...
    }