补充

补充

特定浏览器才能识别的 hack 前缀后缀

具体参考 https://blog.csdn.net/freshlover/article/details/12132801

适配刘海屏

参考

CSS 适配刘海屏的几种方式
 了解 safe-area

通过 safe-area 属性可知刘海区域高度，从而避开刘海区域展示内容

env() 和 constant()

CSS function

/* constant env 顺序不要改 */
padding-bottom: constant(safe-area-inset-bottom); /* 兼容 iOS < 11.2 */
padding-bottom: env(safe-area-inset-bottom); /* 兼容 iOS >= 11.2 */

padding-bottom: 20px;
padding-bottom: calc(constant(safe-area-inset-bottom)+20px);
padding-bottom: calc(env(safe-area-inset-bottom)+20px);