码迷,mamicode.com
首页 > 其他好文 > 详细

适配iphoneX底部安全区

时间:2020-05-18 10:50:11      阅读:193      评论:0      收藏:0      [点我收藏+]

标签:适配   div   lan   class   btn   安全   content   Fix   max   

<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;
}

 

适配iphoneX底部安全区

标签:适配   div   lan   class   btn   安全   content   Fix   max   

原文地址:https://www.cnblogs.com/yangsg/p/12909125.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!