您的位置:首页 > 汽车 > 新车 > 建设网站代码_齐家网装修公司口碑_河北百度seo关键词排名_建网站有哪些步骤

建设网站代码_齐家网装修公司口碑_河北百度seo关键词排名_建网站有哪些步骤

2024/12/25 2:30:49 来源:https://blog.csdn.net/qq_38210427/article/details/144352383  浏览:    关键词:建设网站代码_齐家网装修公司口碑_河北百度seo关键词排名_建网站有哪些步骤
建设网站代码_齐家网装修公司口碑_河北百度seo关键词排名_建网站有哪些步骤

ios下边有一个小黑线,位于底部的元素会被黑线阻挡

safe-area-inset-bottom

一 用法及作用:

IOS全面屏底部有小黑线,位于底部的元素会被黑线阻挡,可以使用以下样式:

.model{padding-bottom: constant(safe-area-inset-bottom); /* 兼容 iOS < 11.2 */padding-bottom: env(safe-area-inset-bottom); /* 兼容 iOS >= 11.2 */
}

获取高度时,可用

.model{height: calc(100% -  constant(safe-area-inset-bottom));height: calc(100% -  env(safe-area-inset-bottom));
}

tips:先使用constant 再使用 env

知识点扫盲
下面把相关知识点整理如下:
env() 与 constant() 设置安全区域,是css里IOS11新增的属性,webkit的css函数,用于设定安全区域与边界的距离,有4个预定义变量:

safe-area-inset-left: 安全区域距离左边界的距离
safe-area-inset-right: 安全区域距离右边界的距离
safe-area-inset-top: 安全区域距离顶部边界的距离
safe-area-inset-bottom: 安全区域距离底部边界的距离
需要的注意一点:H5网页设置 viewport-fit=cover的时候才会生效,小程序里的viewport-fit默认是 cover。
为了更好的理解上文意思,我们来看一下未适配的底部效果:

 

适配后的效果:

 

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com