border-1px的實現（stylus）如何在移動端設置1px的border

在這裏我只介紹下邊框的實現：

當樣式像素必定時,因手機有320px,640px等.各自的縮放比差別,因此設備顯示像素就會有1Npx，2Npx.爲保設計稿還原度,解決就是用media + scale.

實現原理：僞類+縮放

工具：stylus預編譯器

一、在 stylus文件夾中建立mixin.styl文件，內容以下：（即經過僞類+子絕父相 實現1px的下邊框，這只是開始，並無結束 ）

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

　　

二、在 stylus文件夾中建立base.styl文件，內容以下：（根據設備的dpr肯定y軸的縮放比例）

@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)

三、在 stylus文件夾中建立index.styl文件，內容以下：（其中的icon爲圖標字體的樣式）

@import './mixin' @import './icon' @import './base'

四、在main.js中引入

//  相同不加./絕對路徑引用去webpack.base.conf.js配置 'common':path.resolve(__dirname,'../src/common')

　　import 'common/stylus/index.styl'