开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第7天，点击查看活动详情
env() CSS 函数以类似于 var 函数和 custom properties 的方式将用户代理定义的环境变量值插入你的 CSS 中。它们区别在于，env环境变量除了由用户代理定义而不是由用户定义外，还被全局作用在文档中，而var自定义属性则限定在声明它们的元素中。为了告诉浏览器使用屏幕上所有的可用空间，并以此使用env()变量，我们需要添加一个新的视口元值：
<meta name="viewport" content="... viewport-fit=cover">
env的基本语法为：env( <custom-ident> <integer [0,∞]>* , <declaration-value>? ) 。它最初由 iOS 浏览器提供，用于允许开发人员将其内容放置在视口的安全区域中，该规范中定义的 safe-area-inset-* 值可用于确保内容即使在非矩形的视区中也可以完全显示:
/* Using the four safe area inset values with no fallback values */
env(safe-area-inset-top);
env(safe-area-inset-right);
env(safe-area-inset-bottom);
env(safe-area-inset-left);
/* Using them with fallback values */
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);
safe-area-inset-top, safe-area-inset-right, safe-area-inset-bottom, safe-area-inset-left四个定义了视口边缘内矩形的 top, right, bottom 和 left 的安全边距，这样可以安全地放入内容，而不会有被非矩形的显示切断的风险（iPhoneX 横屏示意图）：
目前env主要作用是用来设置安全边距，比如在小程序（移动端）开发过程中，我们可以在底部悬浮按钮添加padding-bottom: env(safe-area-inset-bottom);来设置一个安全边距：
上图真机对比中，左边设置了
padding-bottom: env(safe-area-inset-bottom);按钮正常展示；右边没有设置按钮被遮盖。同理，我们也可以在底部弹出按钮给他设置相对应的padding-bottom: env(safe-area-inset-bottom);或margin-bottom: env(safe-area-inset-bottom);来做移动端的兼容：
在移动端适配方面，该属性给我们带来了极大的便捷，大家有机会快用起来吧😁
