移动端边框1px过粗问题之min-device-pixel-ra

有时候我们切的图总是不像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 */