適配iphoneX底部安全區


<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover">
<div class="bottom-btn-wrap"> //外面包一層
    <div class="main_btn2"></div>  //這個是按鈕
    <div class="placeholder-btn"></div>
</div>
.PlanBookbxModule .bottom-btn-wrap {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
}
.PlanBookbxModule .main_btn, .PlanBookbxModule .main_btn2 {
    width: 100%;
    box-sizing: border-box;
    height: 2.34667rem;
    padding-bottom: env(safe-area-inset-bottom);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
//這里是下面安全區 為了不讓iphoneX下面的橫杠不遮擋按鈕或者圖片
.PlanBookbxModule .placeholder-btn {
    height: constant(safe-area-inset-bottom);
    height: env(safe-area-inset-bottom);
    background: #fff;
}
#root {
    padding-top: env(safe-area-inset-top); padding-right: env(safe-area-inset-right); padding-bottom: env(safe-area-inset-bottom); padding-left: env(safe-area-inset-left); box-sizing: border-box; }

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM