41酱的小草莓

导航

关于刘海屏底部的适配问题

在iPhone X及以上的刘海屏下适配，一般会用媒体查询将底部流出34px的空白高度。

 1 @media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
 2     .list-bottom {
 3         height: 84px;
 4         padding-bottom: 34upx;
 5     }
 6 }
 7 @media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) {
 8     .list-bottom {
 9         height: 84px;
10         padding-bottom: 34upx;
11     }
12 }
13 
14 @media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) {
15     .list-bottom {
16         height: 84px;
17         padding-bottom: 34upx;
18     }
19 }

将最底部盒子的高度增加34px，再用padding-bottom撑开即可。

posted on 2019-12-03 10:26  41酱的小草莓  阅读(775)  评论(0)  编辑  收藏  举报