如何用css適配iphoneX底部橫條？！？

當我們在做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;
        }
    }
}