和兼容性有关的问题

iPhoneX（等设备等虚拟bar的兼容问题）

上图1，红色区块是驻底，假定高度是60px，样式可有两种方式

1. flex布局，高度分别设置为 100vh-60px 和 60px。
2. 底部设定自己高度即可，然后fixed:bottom

上图2，白色蒙层（虚拟bar）盖在了网页上面，网页可用的总体高度减少，演示可以使用两种方案：

1. flex布局，高度分别为 100vh-60px-虚拟高度 和 60px
2. 底部仍旧设定自己的高度，然后fixed:bottom; bottom: 虚拟高度

介绍完了逻辑，以第2种方式的一个示意代码，用来做兼容处理：

@supports (bottom: constant(safe-area-inset-bottom)) or (bottom: env(safe-area-inset-bottom)) {
    main {
      height: 100vh - 60px - constant(safe-area-inset-bottom);
    height: 100vh - 60px - env(safe-area-inset-bottom);
  }
  footer {
    fixed: bottom;
    bottom: constant(safe-area-inset-bottom);
    bottom: env(safe-area-inset-bottom);
  }
}