我是靠谱客的博主 热心鸭子,这篇文章主要介绍html安全区域,css属性_env()和constant()设置安全区域,现在分享给大家,希望可以做个参考。

env()和constant(),是IOS11新增特性,Webkit的css函数,用于设定安全区域与边界的距离,有4个预定义变量:

safe-area-inset-left:安全区域距离左边边界的距离

safe-area-inset-right:安全区域距离右边边界的距离

safe-area-inset-top:安全区域距离顶部边界的距离

safe-area-inset-bottom :安全距离底部边界的距离

而env()和constant()函数有个必要的使用前提,H5网页设置viewport-fit=cover的时候才生效,小程序里的viewport-fit默认是cover。

未适配底部效果:

edeee6edf2f744e5bce3cc5c018e7d0e.png

适配底部代码:

height: calc(96rpx+ constant(safe-area-inset-bottom));//兼容 IOS<11.2

height: calc(96rpx + env(safe-area-inset-bottom));//兼容 IOS>11.2

padding-bottom: constant(safe-area-inset-bottom);//兼容 IOS<11.2

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

// 先constant再env

适配后效果:

aaec4619f4b272a64f7099cd86a89c2f.png

链接: http://www.fly63.com/article/detial/9863

最后

以上就是热心鸭子最近收集整理的关于html安全区域,css属性_env()和constant()设置安全区域的全部内容,更多相关html安全区域内容请搜索靠谱客的其他文章。

本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(42)

评论列表共有 0 条评论

立即
投稿
返回
顶部