码迷,mamicode.com
首页 > 移动开发 > 详细

移动端1px 边框完整方案(四个方向)

时间:2017-11-12 13:31:35      阅读:196      评论:0      收藏:0      [点我收藏+]

标签: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 block
11     position absolute
12     {l} 0
13     {t} 0
14     {w} 100%
15     border-{b} 1px solid $color
16     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 边框完整方案(四个方向)

标签:media   长度   dia   pixel   效果图   lang   blog   osi   上下   

原文地址:http://www.cnblogs.com/-maomao-/p/7821344.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!