移动端最新布局处理
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); } 
