css适配刘海屏手机

刘海屏的手机会出现的问题。

底部的内容太靠底部边了有的可能还会被截断。底部是固定的fixed定位bottom：0

我们可以在最下面这个元素的外层加个样式

padding-bottom: constant(safe-area-inset-bottom); /* 兼容 iOS < 11.2 */
padding-bottom: env(safe-area-inset-bottom); /* 兼容 iOS >= 11.2 */

注意：env() 跟 constant() 需要同时存在，而且顺序不能换

如果只是底部的一个回到顶部的按钮，他也是需要固定在侧边的但是位置不是bottom：0；

可以使用

{
  margin-bottom: constant(safe-area-inset-bottom);
  margin-bottom: env(safe-area-inset-bottom);
}

iOS11 新增特性，Webkit 的一个 CSS 函数，用于设定安全区域与边界的距离，有四个预定义的变量：

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