CSS 环境变量 env() 与自定义变量 var() 全面解读及实用场景

在现代前端开发中，样式的可维护性、适配能力和跨设备体验变得越来越重要。CSS 提供了两种具备"变量"作用的机制------环境变量 env() 和 自定义变量 var() ，它们分别定向解决了"设备环境适配"和"样式灵活复用"两类问题。下面将全面梳理二者的原理、用法、区别与最佳实践。

一、CSS 环境变量 env()

1.1 什么是 env()

env() 是 CSS 中专门用来读取由浏览器内置的"环境变量"的函数。这些变量反映了设备本身的系统参数与特殊区域（如 iOS 全面屏安全区）的信息，让样式能够自动感知设备差异，做自适应布局。

1.2 核心应用 ------ 适配安全区域

最常用的环境变量是与安全区相关的一组，如：

safe-area-inset-top
safe-area-inset-right
safe-area-inset-bottom
safe-area-inset-left

如 iPhone X 及以后的全面屏设备因有刘海、圆角、底部 Home 指示条，为了不遮挡内容，样式可如此写：

css 复制代码

.footer {
  padding-bottom: env(safe-area-inset-bottom);
}

在无特殊安全区的设备上，这些值为 0，不影响布局，可保证页面的兼容性和自适应能力。

1.3 语法与 fallback

语法：env(环境变量名)，如 env(safe-area-inset-bottom)
可加兜底值：env(safe-area-inset-bottom, 20px)，如果变量无效则用默认值。

1.4 注意与兼容性

主要在 iOS 11+ 及现代 WebKit 内核设备有效
变量名大小写敏感
需配合 <meta name="viewport" content="viewport-fit=cover">
Android、大部分桌面端始终为 0，可安心兜底

二、CSS 自定义变量 var()

2.1 什么是 var()

var() 是 CSS 中访问和引用自定义 CSS 变量的函数。开发者可声明变量集中管理样式参数，实现复用、动态切换等强大功能。

2.2 用法概览

定义变量：如 --main-color: #333;
引用变量：color: var(--main-color);
设置兜底值：color: var(--main-color, #666);
变量定义于 :root（全局）或某选择器（局部）

2.3 特性与优势

支持作用域与继承（局部变量覆盖全局）
主题切换、响应式、自定义皮肤等场景极为高效
现代浏览器全面支持（IE 不支持）
JS 可读写变量，易做动态交互

2.4 注意事项

变量名以 -- 开头，区分大小写
仅能用于属性值，纯数字需配合 calc()
支持回退值设计模式

三、env() vs var()：用途与差异对比

对比点	env()	var()
作用域	浏览器内置全局环境信息	开发者可控，自定义作用域
典型用途	适配安全区、设备参数	主题切换、参数复用
兼容性	移动端/部分桌面浏览器支持	现代浏览器支持（IE除外）
可用变量	只能用浏览器预设变量	可自定义任意变量名
动态能力	基于设备环境变化	可通过 JS 动态修改
语法	`env(环境变量名, 兜底值)`	`var(--变量名, 兜底值)`

四、典型应用案例

适配 iPhone X 等全面屏底部

css 复制代码

.fixed-footer {
  padding-bottom: env(safe-area-inset-bottom, 16px);
}

主题色变量统一管理

css 复制代码

:root {
  --primary: #007bff;
}
.btn {
  background: var(--primary);
}

二者结合：自适应兼主题

css 复制代码

:root {
  --footer-bg: #fff;
}
.footer {
  background: var(--footer-bg);
  padding-bottom: env(safe-area-inset-bottom);
}

五、总结

env() 适合自动适配设备物理特性，保证 UI 不被系统区域遮挡，加固移动端体验。
var() 提升样式统一管理和复用，适合各种复杂主题、动态参数配置场景。
掌握这两者，能显著提升前端工程适配力与维护效率，是现代 CSS 开发的核心能力之一。