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)）。
通過合理選擇單位，可以輕松實現跨設備的響應式布局。
?
![[論文筆記] Deepseek技術報告解讀: MLAMTP](http://pic.xiahunao.cn/[論文筆記] Deepseek技術報告解讀: MLAMTP)
