适配

1、ios11为了适配x新增新属性viewport-fit,属性值三个

    contain:可视窗口完全包含网页内容

    cover: 网页内容完全覆盖可视窗口

    auto:默认值,与contain表现一致

    注:适配 iPhoneX 需设置 viewport-fit=cover

2、padding-bottom:constant(safe-area-inset-bottom);/* 兼容 iOS < 11.2 */

    padding-bottom:env(safe-area-inset-bottom);/* 兼容 iOS >= 11.2 */

    注:env() 跟 constant() 需要同时存在,而且顺序不能换。


step1:

    

step2:

    body{ 

        padding-bottom: constant(safe-area-inset-bottom); 

        padding-bottom: env(safe-area-inset-bottom)

    }

step3:fix元素的适配(bottom = 0)时


适配_第1张图片

fixed非完全吸底元素(bottom≠0)


适配_第2张图片
适配_第3张图片

你可能感兴趣的:(适配)