iphoneX 类型机型适配

iphoneX类型手机在外观上有三个改动：圆角（corners）、刘海（sensor housing）和小黑条（Home Indicator）。为了适配这些手机，安全区域这个概念变诞生了：安全区域就是一个不受上面三个效果的可视窗口范围。

为了保证页面的显示效果，我们必须把页面限制在安全范围内，但是不影响整体效果。

viewport-fit是专门为了适配iPhoneX而诞生的一个属性，它用于限制网页如何在安全区域内进行展示，它有两个值，

contain（默认）: 可视窗口完全包含网页内容

cover：网页内容完全覆盖可视窗口

我们需要将顶部和底部合理的摆放在安全区域内，iOS11新增了两个CSS函数env、constant，用于设定安全区域与边界的距离。

函数内部可以是四个常量：

safe-area-inset-left：安全区域距离左边边界距离

safe-area-inset-right：安全区域距离右边边界距离

safe-area-inset-top：安全区域距离顶部边界距离

safe-area-inset-bottom：安全区域距离底部边界距离

必须指定viweport-fit后才能使用env、constant这两个函数

.component {

padding-bottom: constant(safe-area-inset-bottom);

padding-bottom: env(safe-area-inset-bottom);

}

注：constant在iOS < 11.2的版本中生效，env在iOS >= 11.2的版本中生效，css中往往要同时设置他们，将页面限制在安全区域内