env()
CSS 函数以类似于 var
函数和 custom properties 的方式将用户代理定义的环境变量值插入你的 CSS 中。区别在于,环境变量除了由用户代理定义而不是由用户定义外,还被全局作用在文档中,而自定义属性则限定在声明它们的元素中。
为了告诉浏览器使用屏幕上所有的可用空间,并以此使用env()
变量,我们需要添加一个新的视口元值:
<meta name="viewport" content="... viewport-fit=cover">
-
safe-area-inset-top
,safe-area-inset-right
,safe-area-inset-bottom
,safe-area-inset-left
-
safe-area-inset-*
由四个定义了视口边缘内矩形的 top, right, bottom 和 left 的环境变量组成,这样可以安全地放入内容,而不会有被非矩形的显示切断的风险。对于矩形视口,例如普通的笔记本电脑显示器,其值等于零。 对于非矩形显示器(如圆形表盘,iPhoneX屏幕),在用户代理设置的四个值形成的矩形内,所有内容均可见。
body {
padding:
env(safe-area-inset-top, 20px)
env(safe-area-inset-right, 20px)
env(safe-area-inset-bottom, 20px)
env(safe-area-inset-left, 20px);
}