前端中rem,vh,vw
1. rem（Root EM）
参照对象
-
基准：相对于 根元素（
<html>）的font-size计算。 -
默认情况下，浏览器的根
font-size为16px（即1rem = 16px），但可通过 CSS 修改：html { font-size: 20px; /* 此时 1rem = 20px */ }
不同分辨率下的表现
-
变化规则：
-
rem的值 只取决于根元素的font-size，与视口大小无关。 -
若根
font-size固定（如20px），1rem永远等于20px。 -
若根
font-size动态设置（如通过媒体查询或 JS 根据视口调整），rem会按比例变化。
-
-
常见用法：
/* 动态调整根 font-size（适配移动端） */ html { font-size: calc(100vw / 375 * 16); /* 基于设计稿宽度 375px */ }
2. vh（Viewport Height）
参照对象
-
基准：相对于 视口（Viewport）高度的 1%。
-
1vh = 1% 的视口高度（如视口高度为1000px，则1vh = 10px）。
-
不同分辨率下的表现
-
变化规则：
-
vh的值 随视口高度变化。 -
在移动端，浏览器地址栏的显示/隐藏会动态改变视口高度，导致
vh值波动（可用dvh解决）。
-
-
常见用法：
.full-screen { height: 100vh; /* 始终占满视口高度 */ }
3. vw（Viewport Width）
参照对象
-
基准：相对于 视口（Viewport）宽度的 1%。
-
1vw = 1% 的视口宽度（如视口宽度为1200px，则1vw = 12px）。
-
不同分辨率下的表现
-
变化规则：
-
vw的值 随视口宽度变化。 -
适用于响应式布局（如替代百分比，避免嵌套元素计算问题）。
-
-
常见用法：
.responsive-box { width: 50vw; /* 始终占视口宽度的一半 */ }
4. 对比总结
| 单位 | 参照对象 | 是否随视口变化 | 典型应用场景 |
|---|---|---|---|
rem | 根元素的 font-size | 否（除非动态修改根字号） | 字体大小、间距、整体缩放 |
vh | 视口高度 | 是 | 全屏布局、高度自适应 |
vw | 视口宽度 | 是 | 响应式宽度、栅格系统 |
5. 特殊注意事项
移动端 vh 的问题
-
问题：在移动端浏览器中，
100vh可能包含地址栏高度，导致内容被遮挡。 -
解决方案：
-
使用 CSS 新单位
dvh（Dynamic Viewport Height，动态视口高度）：.mobile-section { height: 100dvh; /* 自动排除地址栏高度 */ } -
或通过 JavaScript 动态计算：
document.documentElement.style.setProperty('--vh', `${window.innerHeight}px`);.mobile-section { height: calc(var(--vh, 1vh) * 100); }
-
vw 的替代方案
-
若需避免
vw计算复杂性，可使用 CSS 容器查询（cqw）或 Flex/Grid 布局。
6. 不同分辨率下的计算示例
| 视口尺寸 | 1rem（根 font-size: 16px） | 1vh（视口高度 900px） | 1vw（视口宽度 1200px） |
|---|---|---|---|
| 桌面端 | 16px | 9px | 12px |
| 移动端竖屏 | 16px | 6.5px（含地址栏） | 3.75px（宽度 375px） |
| 移动端横屏 | 16px | 3.75px（高度 375px） | 6.5px（宽度 650px） |
7. 如何选择单位？
-
全局缩放：用
rem（结合媒体查询动态调整根font-size）。 -
视口适配：用
vw/vh（或dvh解决移动端问题）。 -
精确控制：结合
calc()使用（如calc(1rem + 1vw)）。
通过合理选择单位，可以轻松实现跨设备的响应式布局。