在前端开发体系中，“单位”往往是最容易被忽视，却又最深刻影响实际界面呈现和开发体验的重要基础。设计稿从像素开始，而代码却必须在各种屏幕与设备上恰当地展示。因此，理解 px、vw、vh、rem、em 等单位背后的机制，是走向专业前端开发的核心一步。
本文将从你提供的文档内容出发，结合实践经验进行扩展，完整梳理前端单位体系，尤其是 移动端布局与响应式设计 的核心逻辑，让单位不再只是简单的“长度”，而是开发中灵活掌控布局的武器。本文所引用的源内容来自你提供的 md 文档：readme
一、前端布局的基础：为什么要理解单位？
不少初学者在开发中遇到以下困惑：
- 设计稿给的是 750px 宽，但 CSS 里却要写成 375px 或 rem 换算后的数值？
- 明明写了
width: 100%，为什么在不同设备上呈现却不一样？ - 为什么有时候用 px 可以，有时候却必须使用百分比或者 rem？
这些问题都指向一个核心：不同单位背后衡量的参照系统不同。
要真正理解布局，就要理解单位如何参与渲染计算，浏览器如何把 CSS 中的“数字”映射成屏幕上的实际像素，以及设备特性的差异如何影响页面表现。
从这个角度出发，我们从最基础的 px 讲起，再逐步延展到移动端适配体系。
二、px：前端布局的最小单位，但并非“真实像素”
px 的定义：
px: 像素单位，绝对单位，1px = 1个物理像素（pc端）
但是在现代移动端世界，这个定义已经发生了变化。
1. PC 端：1px = 真实物理像素
在传统显示器（如 1366 × 768）上，一个 CSS 像素（1px）通常就等于一个真实物理像素。
2. 移动端：1px ≠ 物理像素
现代手机普遍是高分屏，比如：
| 设备 | 分辨率 | DPR（设备像素比） | CSS像素宽度 |
|---|---|---|---|
| iPhone 14 | 2532 × 1170 | 3 | 390 |
| 小米 14 | 2670 × 1200 | 3 | 400 |
由于 DPR（device pixel ratio）的存在：
CSS像素 = 设备物理像素 / DPR
也就是说：
- 设计师看到的 750px 宽设计稿
- 前端实际写成 375px（如果 DPR=2）
所以，px 虽然是绝对单位，但在移动端世界并非绝对“真实像素” 。
px 的出现更像是浏览器在不同设备间帮你“缩放”内容的一种抽象。
三、vw与vh：站在视口维度思考布局
vw: 相对单位，表示视口宽度的1%，vh: 表示视口高度的1%
这两个单位在移动端自适应布局中极为重要。
1. 为什么 vw 比 px 更适合响应式？
因为它是相对单位：
1vw = 视口宽度的 1%
如果手机屏幕变宽，例如从竖屏（宽 390px）转到横屏（宽 844px）：
font-size: 10vw
= 39px（竖屏）
= 84.4px（横屏）
完全保持比例。
过去很多人使用媒体查询实现适配，现在开发者越来越倾向于使用 vw。
2. vh 的常见用途
- 定义全屏背景：
height: 100vh; - 设置弹窗居中：
top: 50vh; transform: translateY(-50%); - 做垂直方向按屏切换动画（常见于 H5 页面）
四、vmin、vmax：更智能的相对单位
vmin 取宽高的较小值，vmax 取较大值
这是一个极其强大的工具，尤其是在手机横竖屏切换时。
1. 横竖屏自适应的痛点
如果使用 vw：
- 竖屏：vw = 1% 宽（较窄）
- 横屏：vw = 1% 宽（较宽）
但 UI 往往希望无论横屏还是竖屏，布局比例不至于失控。
2. vmin/vmax 的出现就是为了解决这个
比如设置一个正方形元素：
width: 50vmin;
height: 50vmin;
无论横屏还是竖屏：
- 宽高较小的那一项决定尺寸（保证不会拉得太扁）
- 在游戏界面/H5 活动页面特别常见
它比 vw 更适应多种设备和方向变化。
五、rem：移动端适配的核心武器
1rem = 根元素的 font-size，通过动态改变根元素的 font-size，使得布局能自适应不同屏幕。
1. rem 本质上是“全局缩放”
如果你设置：
html { font-size: 10px }
.box { width: 20rem }
那么 .box 实际宽度：
= 20 × 10px
= 200px
若切换设备，将根字体设置为 12px：
.box = 20 × 12 = 240px
所有 rem 单位元素都会等比例缩放。
这就给了我们“适配不同屏幕”的新方式。
2. rem 实现响应式布局
(1)实践中，开发者通常会将根元素字体大小设置为视口宽度的某个百分比，例如：
html {
font-size: 62.5%; /* 使得1rem ≈ 10px (基于浏览器默认16px) */
}
@media (min-width: 768px) {
html {
font-size: 75%; /* 增大根字体大小，整体放大布局 */
}
}
@media (min-width: 1200px) {
html {
font-size: 100%; /* 进一步放大 */
}
}
(2)另一种更精细的方法是使用JavaScript根据视口尺寸动态计算根字体大小：
function setRemUnit() {
const docEl = document.documentElement;
const width = docEl.getBoundingClientRect().width;
const rem = width / 10; // 将视口宽度分为10份，每份为1rem
docEl.style.fontSize = rem + 'px';
}
setRemUnit();
window.addEventListener('resize', setRemUnit);
这种方法使得1rem始终等于视口宽度的1/10，从而创建真正基于视口尺寸的响应式布局。
3. 为什么 rem 现在仍被大量使用？
- 兼容性极好
- 适合基于设计稿等比例缩放的场景
- 与 Vant、Antd Mobile 等 UI 库高度适配
rem 是移动端布局最传统、最稳定的方案之一。
六、em：基于自身或父级的动态单位
1em = 当前元素（自己的或父元素）的字体大小值，用于嵌套元素的字体大小设置
em 和 rem 的区别：
| 单位 | 参考对象 |
|---|---|
| rem | html 根元素的 font-size |
| em | 当前元素或父级的 font-size |
1. em 的适用场景
- 按钮内部图标与文字的相对大小
- 让组件内部元素随组件大小变化
- 适合构建可复用组件
例如 Button 组件：
button {
font-size: 1em;
padding: 0.5em 1.2em;
}
只要外部设置：
button.large { font-size: 20px; }
button.small { font-size: 12px; }
整个按钮会自然缩放，包括 padding。
2. em 的问题
容易造成嵌套放大效果：
.parent { font-size: 20px; }
.child { font-size: 1.2em; } /* 24px */
.grand-child { font-size: 1.2em; } /* 28.8px */
因此 em 更适合局部 UI 组件，而 rem 更适合整体页面布局。
七、移动端适配的完整体系：如何选择单位？
结合上文，我们可以给一个较为清晰的单位选用策略。
1. 页面整体布局：推荐 vw、vmin/vmax、rem
- vw/vh：更灵活的响应式布局，适合全屏场景
- rem：适合基于设计稿的等比例缩放（特别是 750/375 系设计稿）
- vmin/vmax：适合横竖屏变化强烈的 H5 活动页
2. 文本尺寸：rem 或 px，视项目而定
- UI 组件库常使用 rem
- 也有项目使用 px 加媒体查询
3. 图标、按钮内部间距：尽量使用 em
让组件内部保持比例自适应。
八、综合示例：移动端页面单位组合的最佳实践
下面给出一个常见移动端页面的单位组合方式：
html { font-size: calc(100vw / 7.5); }
.banner {
height: 40vh;
padding: 2rem;
}
.title {
font-size: 2rem;
}
.card {
margin: 3vmin;
padding: 2vmin;
border-radius: 2vmin;
}
.button {
font-size: 1rem;
padding: 0.6em 1.4em;
border-radius: 0.5em;
}
为什么这样组合？
- 页面主结构：使用 rem/vw
- 局部 UI 元素：使用 em 让组件自适应
- 容器和间距：使用 vmin 保持横竖屏一致性
这种组合方式最大化利用了各单位的优点。
九、结语：理解单位，就是理解移动端布局的全貌
浏览器渲染表面上只是一行行 CSS，但背后隐藏着复杂的像素换算、视口逻辑与设备特性。
从 px 到 vw、vh，到 vmin/vmax，再到 rem、em，每一个单位都是一个独立的小系统，有其适用场景和计算机制。
掌握这些，你就能构建一个真正健壮、灵活、跨设备的前端布局体系。
未来无论你是构建复杂组件、跨端 H5 页面还是移动端 WebApp，你都能从容选择最合适的单位，让设计与代码完美契合。
