iPhoneX 及以上 手机底部适配 CSS3

概述：iOS移动端设备从iphoneX之后几乎都是全面屏，刘海屏。但是像这种全面屏的iOS设备，在底部有一个菜单呼出按钮，这个时候我们就需要进行相应的适配。这里我简单记录下我自己在工作中使用的适配方式。

1. 需求场景
   实现iPhoneX 及以上的手机底部适配，
   当浏览器底部的菜单栏被隐藏的时候，位于底部的选项框自动增加高度
   当浏览器底部的菜单栏被显示的时候，位于底部的选项框自动减少高度

2. 实现方式
   在css中有一个计算属性 calc() , 将需要计算的值（带单位）放到这个属性中，就能够实现计算

例如：

.footer{
	height:calc(10px + 20px);
	width:calc(10vw + 20%);
}

在iOS的系统中，为了实现简单的底部适配，苹果设计了一个安全区域的css属性值，哪里需要就加在哪里

 constant(safe-area-inset-bottom);
 env(safe-area-inset-bottom);

例如

.footer{
	height:calc(10px + constant(safe-area-inset-bottom));
	height:calc(10px + env(safe-area-inset-bottom));
}

这样就能够实现iPhone底部的自动适配了

3. 结语
   其实使用CSS 对iOS高版本的底部适配还是比较简单的，还有就是通过屏幕的逻辑分辨率和浏览器的navigator.useragent的识别来实现不同机型的判断，这个js比较繁琐就不详述了，还是希望大家简单快捷的解决当前的问题。希望大家能够有所收获！