处理iphoneX底部的横条

iphoneX手机取消了实体Home键，当网页底部fixed 元素时候，一部分元素可能就被这个横条遮挡住，怎么适配解决呢？
1：

2：
　　　　页面主体内容限定在安全区域内,如果不设置这个值，可能存在小黑条遮挡页面最底部内容的情况
　　　　body { padding-bottom: env(safe-area-inset-bottom); }

3：

​ fixed 元素的适配：给fixed元素添加以下属性
　　　　第一种：padding-bottom: env(safe-area-inset-bottom);
　　　　　　　　注意元素是否设置box-sizing:border-box;否则不起作用
　　　　第二种：height: calc(60px(假设值) + env(safe-area-inset-bottom));
　　　　第三种：margin-bottom: env(safe-area-inset-bottom);

这三种方式都可解决，视情况而定选择合适的，也可以灵活为fixed 元素的子元素添加这些属性。fixed 非完全吸底元素（bottom ≠ 0），比如 “返回顶部”、“侧边广告” 等，给该元素设置

bottom: calc(50px（假设值）+ env(safe-area-inset-bottom)) !important;
height: calc(50px（假设值）- env(safe-area-inset-bottom)) !important;

css 函数 env() 和 constant()
上面两个函数可以直接使用变量函数，只有在 webkit 内核下才支持
env() 必须在 ios >= 11.2 才支持
constant() 必须 ios < 11.2 支持
env 和 constant 只有在 viewport-fit=cover 时候才能生效
兼容前后版本,例子：

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

参考：

https://aotu.io/notes/2017/11/27/iphonex/