适配 iphoneX

第一步： 设置网页可视窗口的布局方式

   

    viewport-fit属性使得页面内容完全覆盖整个窗口。

第二步：页面主体内容限定在安全区域内

    body {  padding-bottom:  constant(safe-area-inset-bottom);  }

    // 设置了viewport-fit属性，才能使用constant函数

第三步：fiexd元素的适配

    类型一：fixed完全吸底元素（bottom = 0）,如下图：

    

       a、可以通过加内边距padding扩展高度：

          .xx { padding-bottom:  constant(safe-area-inset-bottom);  }

        b、或者可以通过计算函数calc覆盖原来的高度

            .xx { height: calc( 原来的高度值 +  constant(safe-area-inset-bottom)); }

        *注意，这个方案需要吸底条必须是有背景色的，因为扩展的部分背景是跟随外容器的，否则出现镂空情况。   

    类型二：fixed 非完全吸底元素（bottom ≠ 0），比如 “返回顶部”、“侧边广告” 等

        a、这种需要对应的向上调整，可以仅通过外边距margin来处理

            .xx { margin-bottom: constant(safe-area-inset-bottom); }

        b、或者通过计算函数calc覆盖原来的bottom值

                .xx { bottom: calc( 原来的bottom值  + constant(safe-area-inset-bottom) ); }

    fixed元素适配，只需要iphoneX才需要时，需要配合@support条件判断：

            @support( bottom: constant( safe-area-inset-bottom ) ) {

                .xx { margin-bottom: constant(safe-area-inset-bottom); }

            }

属于iphoneX的媒体查询：

    @media only screen and (device-width: 375px) and (device-height:812px) and (-webkit-device-pixel-ratio:3) { ... }

==================   完美！！！   =====================