做移动端H5的同学，在你的前端开发生涯中，是否遇到过这种问题？
浮在手机屏幕底部的功能区，在你的安卓和苹果的大部分机型上展示极其完美：
这种
可是在iPhone上却是这种？！？
遇到这样的情况，不要着急，不用js，不用vue，css一招教你轻松搞定！
iPhoneX取消了物理按键，改成了底部的小黑线，这一改动就引发了移动端的屏幕适配问题，对此，我们需在底部留有安全距离，具体解决方法如下：
1.正常机型
一般这种底部的功能区都是不随页面滚动而变化的，我这里用的是固定定位，用vant的Tabs组件实现的一个简易的tab栏，上代码（框架用的是vue3）：
这样写在大部分机型上展示是没有任何问题的，展示如下：
可是在x上。。。
2.iPhoneX的适配
很简单，只需要加两句话即可
再看看在x上的效果：
完美！
本文只介绍了一种方法，有更多有趣的方法评论区等你~
172
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
