当我们在做app或者小程序的时候，如果是自适应屏幕高度，或者是用定位到底部按钮的时候，iphoneX底部的返回横条老是遮挡底部内容，如果巧妙的设计代码，使它能适配到iphoneX呢？
比如我写了一个底部按钮，漂浮在所有内容的上方，以下代码当在iphoneX的时候，就会被遮挡大约20px
// 正常手机使用的代码
/* 外层盒子 */ .hasbtn-padding{ padding-bottom: 140rpx; } /* 底部定位的按钮 */ .bottom-button-box{ width: 100%; height: 100rpx; position: fixed; left: 0; bottom: 0; box-shadow: 0 -5rpx 5rpx #efefef; display: flex; align-items: center; justify-content: space-between; background-color: #fff; }解决办法：
使用css适配到有横条的手机，把外层盒子的padding-bottom修改的同时，需要把按钮的底部距离设置了，按钮加了个after是为了防止外层盒子滑动的时候，横条处的内容穿透。
/* 适配iphonex */ @supports (bottom: env(safe-area-inset-bottom)) { .hasbtn-padding{ padding-bottom:calc(env(safe-area-inset-bottom) + 140rpx); // 这里是重点 } .bottom-button-box{ bottom:env(safe-area-inset-bottom); // 这里是重点 &:after{ content:''; height:env(safe-area-inset-bottom); // 这里是重点 position: absolute; top:100%; left: 0; right:0; background-color: #fff; } } }