移动端头部

最新推荐文章于 2023-10-04 10:35:03 发布

转载最新推荐文章于 2023-10-04 10:35:03 发布 · 139 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/wy90s/p/11233264.html

本文介绍了一种针对不同移动设备如iOS和iPhone X的页面头部样式适配方案。通过使用特定的CSS样式，可以实现不同设备上的良好显示效果。

<div class="header" :class="{'ios': isIOS, 'iphonex': isIphonex}">
      <div class="content">
        <div class="back"></div>
        <div class="title">办理赔</div>
      </div>
 </div>

.header.ios{
  height: 0.54rem;
  .content{
    padding-top: 0.1rem;
  }
}
.header.iphonex{
  height: 0.84rem;
  .content{
    padding-top: 0.4rem;
  }
}
.header{
  height: 0.44rem;
  .content{
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    width: 100%;
    height: 0.44rem;
    background: #4478F3;
    .title{
      font-size: 0.18rem;
      height: 0.44rem;
      line-height: normal;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #ffffff;
    }
    .back{
      position: absolute;
      bottom: 0;
      left: 0;
      display: flex;
      align-items: center;
      width: 0.35rem;
      height: 0.44rem;
      padding-left: 0.15rem;
    }
    .back:after{
      content: '';
      display: inline-block;
      border-color: #ffffff;
      border-style: solid;
      transform: rotate(-136deg);
      height: 0.11rem;
      width: 0.11rem;
      border-width: 2px 2px 0 0;
      position: relative;
      left: 2px;
    }
  }
}