使用safe-area-inset-*来适配iPhoneX的刘海屏及底部横条区域

之前一直沿用同事写的媒体查询处理这个问题，所有固定在底部展示的按钮栏都要用媒体查询来定义距离底部的距离，着实不太方便，而且媒体查询比较有局限性，不太可能把市面上所有机型都适配一遍。

刚好要处理折叠屏适配问题，重构了一个复杂页面的布局，就找到了使用safe-area-inset-*来适配iPhoneX底部横条区域的方法，详见小程序利用safe-area-inset-*兼容iPhoneX。

实现方案：

如果只是要适配底部横条区域的话，只需要使用下边代码即可：

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

如上边两张图片，一个是iphoneX机型，一个是其他机型。当然这两个按钮栏是有内边距的，可以这样写：

padding-bottom:20rpx;
padding-bottom: calc(20rpx + constant(safe-area-inset-bottom));
padding-bottom: calc(20rpx + env(safe-area-inset-bottom));

更多扩展：

除了设置底边距，还可以设置顶部甚至左侧、右侧的内边距：

safe-area-inset-top，
safe-area-inset-right，
safe-area-inset-bottom，
safe-area-inset-left

当然，如果是开发小程序的话，只要使用小程序的默认的头部导航，基本用不上对头部刘海屏或后边的胶囊屏做处理的。

如果要是使用了自定义导航的话，那就必须要处理这个高度了。