共计 723 个字符，预计需要花费 2 分钟才能阅读完成。
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～
正文完