iPhoneX及以上机型兼容底部（safe-area-inset-*）写法！

iPhoneX系列手机底部样式如何适配？

样式适配是前端不可缺少的环节，而对于现在来说，iPhoneX及之后的手机，底部都会有一个黑线，用于切换任务等等。而css恰好有那么一个属性能帮助你适配iPhoneX系列手机机型！！

iPhoneX系列底部：

css属性：

• 屏幕上安全距离: safe-area-inset-top；
• 屏幕右安全距离: safe-area-inset-right；
• 屏幕下安全距离: safe-area-inset-bottom；
• 屏幕左安全距离: safe-area-inset-left；

适配iOS 11：

padding-top: constant(safe-area-inset-top);
padding-right: constant(safe-area-inset-right);
padding-bottom: constant(safe-area-inset-bottom);
padding-left: constant(safe-area-inset-left);

适配iOS 11.2+：

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

兼容写法：

padding-top: constant(safe-area-inset-top);
padding-top: env(safe-area-inset-top);

通过简单的css属性，完美适配iPhoneX系列样式，so easy～