移动端布局tips_带有横线的自适应标题

写在前面的话：

　　要实现下图的效果：

　　

　　文字说明：中间字的部分是固定的，左右两边的线条是自适应的，同时还要实现底部的 1px 下边框~

思路：

　　使用flex布局，使用媒体查询实现1px~

做法：

　（1）HTML布局(1.html):

<div class="title border-bottom-1px">
      <div class="line background-bottom-1px"></div>
      <div class="text">课程介绍</div>
      <div class="line line2 background-bottom-1px"></div>
</div>

　（2）样式（这里使用的stylus，复制的时候要把注释给去掉~）

　　　1.html中的style 标签：

.title
      display: flex　　　　　　　　/* 对父元素使用flex布局 */
      width: 100%
      height: 35px
      line-height: 35px
      border-bottom-1px(#b5b5b5)
      .line
        flex: 1
        position: relative
        top: 18px
        height: 1px
        background-bottom-1px(left, #fff, #4a4a4a)
      .line2
        background-bottom-1px(right, #fff, #4a4a4a)
      .text
        font-size: 12px
        margin: 0 16px 0

　　看上边的代码用到了

 　　border-bottom-1px(#b5b5b5)
　　 background-bottom-1px(left, #fff, #4a4a4a)
　　 background-bottom-1px(right, #fff, #4a4a4a)

　　等代码，这些是我写在一些stylus文件中的。

　　　1）mixin.styl（用来实现函数式css,在使用时需要直接引入）

// 1px 底部border的实现    
border-bottom-1px($color)
  position: relative
  &:after
    display: block
    position: absolute
    left: 0
    bottom: 0
    width: 100%
    border-top: 1px solid $color
    content: ' '
    
// 1px 渐变色底部background的实现    
background-bottom-1px($direction, $color1, $color2)
  position: relative
  &:after
    display: block
    position: absolute
    left: 0
    bottom: 0
    width: 100%
    height: 1px
    background: -webkit-linear-gradient($direction, $color1, $color2)
    content: ' '

　　　2）base.styl用来存放媒体查询部分代码，不同的像素比，缩放比例是不一样的：

　　　　（如果在index.styl引入了此文件，且在main.js中引入了index.styl时，就不用再引入一次了，在需要用到该类的元素上边直接使用类名就可以~）

// 底部1px的border
@media (-webkit-min-device-pixel-ratio: 1.5),(min-device-pixel-ratio: 1.5)
  .border-bottom-1px
    &::after
      -webkit-transform: scaleY(0.7)
      transform: scaleY(0.7)
          
@media (-webkit-min-device-pixel-ratio: 2),(min-device-pixel-ratio: 2)
  .border-bottom-1px
    &::after
      -webkit-transform: scaleY(0.5)
      transform: scaleY(0.5)

// 底部1px的background
@media (-webkit-min-device-pixel-ratio: 1.5),(min-device-pixel-ratio: 1.5)
  .background-bottom-1px
    &::after
      -webkit-transform: scaleY(0.7)
      transform: scaleY(0.7)
          
@media (-webkit-min-device-pixel-ratio: 2),(min-device-pixel-ratio: 2)
  .background-bottom-1px
    &::after
      -webkit-transform: scaleY(0.5)
      transform: scaleY(0.5)

ok了~

效果图：
　　

至此，本文结束~

转载于:https://www.cnblogs.com/Christeen/p/6500666.html