iphoneX兼容之自定义底部菜单

在你要编写的底部菜单中插入 样式 padding-bottom: calc(env(safe-area-inset-bottom) / 2) 即可兼容

例如：css中插入

@supports (bottom: constant(safe-area-inset-bottom)) or (bottom: env(safe-area-inset-bottom)) {
.fixed-wrap {
height: calc(env(safe-area-inset-bottom) / 2);
width: 100%;
}
.fixed-pay {
padding-bottom: calc(env(safe-area-inset-bottom) / 2);
}
}

其中 env(safe-area-inset-bottom) 是计算兼容的高度 通常一半即可

    calc  是计算css   你也可以加入高度  假设有第二层 底部固定栏【即底部导航栏上面还有一层固定栏】  可如下编写  

view.footer {

bottom: calc(100rpx + env(safe-area-inset-bottom));

}

这样轻轻松松解决兼容 不需要写js代码