實現移動端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)

如果需要多處使用一像素邊框，則講媒體查詢部分抽出來成一個單獨的文件即可，哪裏需要就在哪裏引入