移動端1px 邊框完整方案（四個方向）

標籤：media   長度   dia   pixel      lang   blog   osi   上下   

使用stylus(預先處理)

需要一個函數接收兩個參數 第一個需要在哪個方向出現邊框 第二個邊框顏色

$border1px(face,$color)

根據傳入的方向屬性，調整其他參數

l  左右方向

t  垂直方向

w 上下出現邊框則為width反之為height（邊框在方向上的長度）

b 上出現邊框則為bottom  

x 為哪個方向上的縮放  

具體對應關係如下

  face==top    && (l=left  t=top b=bottom w=width  x=scaleY)  face==bottom && (l=left  b=top t=bottom w=width  x=scaleY)  face==left   && (l=left  t=top b=right  w=height x=scaleX)  face==right  && (l=right t=top b=left   w=height x=scaleX)

下面是邊框

  .border-1px {    position relative  }  .border-1px::after {    display block    position absolute    {l} 0    {t} 0    {w} 100%    border-{b} 1px solid $color    content ‘ ‘  }

媒體查詢

這裡需要使用字串拼接 寫成x(0.7)  x將不會賦值

  @media (-webkit-min-device-pixel-ratio 1.5),(min-device-pixel-ratio1.5) {    .border-1px::after {      -webkit-transform x+‘(0.7)‘      transform x+‘(0.7)‘    }  }  @media (-webkit-min-device-pixel-ratio 2),(min-device-pixel-ratio 2) {    .border-1px::after {      -webkit-transform x+‘(0.5)‘      transform x+‘(0.5)‘    }  }

html

  <div class="product">    <div class="border-1px">      <p>111</p>      <p>111</p>      <p>111</p>      <p>111</p>    </div>  </div>

css

<style scoped lang="stylus">@import ‘../common/css/index‘.product  $border1px(top,red)  border-bottom 1px solid red</style>

完整代碼

 1 $border1px(face,$color) 2   face==top    && (l=left  t=top b=bottom w=width  x=scaleY) 3   face==bottom && (l=left  b=top t=bottom w=width  x=scaleY) 4   face==left   && (l=left  t=top b=right  w=height x=scaleX) 5   face==right  && (l=right t=top b=left   w=height x=scaleX) 6   .border-1px { 7     position relative 8   } 9   .border-1px::after {10     display block11     position absolute12     {l} 013     {t} 014     {w} 100%15     border-{b} 1px solid $color16     content ‘ ‘17   }18   @media (-webkit-min-device-pixel-ratio 1.5),(min-device-pixel-ratio1.5) {19     .border-1px::after {20       -webkit-transform x(0.7)21       transform x+‘(0.7)‘22     }23   }24   @media (-webkit-min-device-pixel-ratio 2),(min-device-pixel-ratio 2) {25     .border-1px::after {26       -webkit-transform x+‘(0.5)‘27       transform x+‘(0.5)‘28     }29   }

 

移動端1px 邊框完整方案（四個方向）