实现移动端1px边框

最近学了一下vue的实战课程，学习到了其中的一个页面设计技巧，觉得深有感触，于是便写个博客记录下来，以便下次查阅

项目中是通过vue+stylus来实现的，那么首先需要说一下实现原理，因为在移动端中物理像素是设备像素的两倍，那么以平时在pc端中设计的1px ,在移动端设备中就是2px了，那么，我们要实现移动端的1px边框，就需要对这个1px边框进行缩放。

假如我们有一个div，我们要设置它在移动端中的1px下边框，那么我们可以这么做

html部分：
<div class="box border-1px"></div>

stylus部分：

.box
     width 100%
     height 40px
     position relative
     &:after
        display block
        width 100%
        position absolute
        left 0
        bottom 0
        border-top 1px solid rgba(7,17,27,0.1)
        content ' '
        //使用媒体查询像素比，进行边框缩放
@media (-webkit-min-device-pixel-ratio:1.5), (min-device-pixel-ratio:1.5)
    .border-1px
        &::after
            -webkit-transform scaleY(0.7)
            transform scaleY(0.7)


@media (-webkit-min-device-pixel-ratio:2), (min-device-pixel-ratio:2)
    .border-1px
        &::after
            -webkit-transform scaleY(0.5)
            transform scaleY(0.5)

如果需要多处使用一像素边框，则讲媒体查询部分抽出来成一个单独的文件即可，哪里需要就在哪里引入