移动端最新布局处理-526互联

1移动端安全距离

底部活动条（Home 键）
顶部传感器（刘海屏、水滴屏、挖孔屏等）
圆角边框

为了解决这个问题，W3C 推出新的 CSS 样式属性：

safe-area-inset-top //安全区域距离顶部边界的距离 
safe-area-inset-bottom //安全距离底部边界的距离 
safe-area-inset-left //安全区域距离左边边界的距离 
safe-area-inset-right //安全区域距离右边边界的距离

iOS 环境中只支持 iOS11.0 以上的版本

iOS11.0-11.2 中使用 “constant()”

iOS11.3 以上使用 “env()”

Android 5-6.x 版本中支持，使用的是 “env()”

通常我们为了兼容基本都会有这样的写法：

padding-top: 40px;
padding-top: constant(safe-area-inset-top);
padding-top: env(safe-area-inset-top);

布局建议

在移动端我们通常都是头部尾部固定，中间区域自适应滚动。

Dom 结构：

<body>
<div class='box'>
  <head></head>

 <div class='main'>

 <div class='scroll'>

</div>


</div>


  <footer></footer>

</div>
 
<body>

CSS：

.box {
  display: flex; // 利用flex布局
  flex-flow: column;
  min-height: 100vh;
  overflow: hidden;
}

head,
main,
footer {
  padding: 0 40px 0 30px;
  padding: 0 constant(safe-area-inset-right) 0 constant(safe-area-inset-left);
  padding: 0 constant(safe-area-inset-right) 0 constant(safe-area-inset-left);
}

head {
  padding-top: 40px;
  padding-top: constant(safe-area-inset-top);
  padding-top: env(safe-area-inset-top);
}

main {
  flex: 1; //撑开中间内部部分
  overflow: auto;
  max-height: 60vh; //固定好中间内容的最大高度即可以区域滚动
min-height:0;
}

.scroll {

height:100%;

overflow-y: auto;

 }

footer { padding-bottom: 20px; padding-bottom: constant(safe-area-inset-bottom); padding-bottom: env(safe-area-inset-bottom); }