CSS环境变量函数env()
⽬前的功能主要是 设置安全边距,未来可能有更多功能。
/* 直接使⽤4个安全内边距值 */
env(safe-area-inset-top);css变量
env(safe-area-inset-right);
env(safe-area-inset-bottom);
env(safe-area-inset-left);
/* 使⽤4个安全内边距值,同时设置兜底尺⼨值 */
env(safe-area-inset-top, 20px);
env(safe-area-inset-right, 1em);
env(safe-area-inset-bottom, 0.5vh);
env(safe-area-inset-left, 1.4rem);
env()函数中的属性区分⼤⼩写,因此,下⾯CSS代码中的padding-left值⼀定是50px:
padding-left:env(SAFE-AREA-INSET-LEFT,50px);
SAFE-AREA-INSET-LEFT是⽆法识别的属性,因此,会使⽤兜底的50px作为padding-left的属性值。
要想使safe-area-inset-*属性表现出准确的间距,⼀定要确保viewport相关的<meta>信息
<meta name="viewport"content="viewport-fit=cover">
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论