实现手机端的1px像素 border的实现

实现1px像素需要知道min-device-pixel-ratio设备像素比。如不清除的情移步了解下张鑫旭大神的设备像素比devicePixelRatio简单介绍

@media (-webkit-device-pixel-ratio: 1.5),(device-pixel-ratio: 1.5) {
        .border-1px{
            &:after{
                -webkit-transform: scaleY(.7);
                transform: scaleY(.7);
            }
        }
    }

    @media (-webkit-device-pixel-ratio: 2), (device-pixel-ratio: 2) {
        .border-1px{
            &:after{
                -webkit-transform: scaleY(.5);
                transform: scaleY(.5);
            }
        }
    }

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

转载至慕课网vue 饿了么的教程