微信小程序吸底区域适配iPhoneX的实现

　　微信小程序适配iPhone X主要针对fix定位到底部的区域，比如详情页或购物车底部的按钮栏，会与iPhone X的

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

　　这里我们只需要关注 safe-area-inset-bottom 这个变量，因为它对应的就是小黑条的高度（横竖屏时值不一样）。

　　这就意味着，之前使用的 constant() 在 iOS11.2 之后就不能使用的，但我们还是需要做向后兼容，像这样：

　　第三步：fixed 元素的适配类型一：fixed 完全吸底元素（bottom = 0），比如下图这两种情况：

　　注意，这个方案需要吸底条必须是有背景色的，因为扩展的部分背景是跟随外容器的，否则出现镂空情况。

　　还有一种方案就是编程怎么入门，可以通过新增一个新的元素（空的颜色块，主要用于小黑条高度的占位），然后吸底元素可以不改变高度只需要调整位置，像这样：

　　类型二：fixed 非完全吸底元素（bottom ≠ 0），比如 “返回顶部”、“侧边广告” 等

　　写到这里，我们常见的两种类型的 fixed 元素适配方案已经了解了吧。如果我们只希望 iPhoneX 才需要新增适配样式，我们可以配合 @supports 来隔离兼容样式，当然这个处理对页面展示实际不会有任何影响：