H5 CSS适配手机刘海屏高度

设置css样式

关键在于padding-top的设置，自动适配刘海屏的高度

.header {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 88px;
  font-size: 36px;
  color: #333333;
  //使用padding-top的设置适配刘海屏
  padding-top: constant(safe-area-inset-top); 
  padding-top: env(safe-area-inset-top);
}

标签使用

<div class="header">
      <img class="back-img" src="../img/back_black.png" alt=""/>
      我是标题
 </div>

这样设置后，没有刘海屏的padding为0 ，有刘海屏的padding为刘海屏高度