基础单位理解：px、em、rem 的用途与差异
基本单位间的区别与适用场景
在 CSS 体系中，px（像素单位）是最直观的物理单位，适用于需要稳定像素级别的边距和边框。它的优势是可预测性，但在不同高分辨率设备上并不总是等同于实际物理像素。
相对单位 em 基于父元素的字体大小进行缩放，跨层嵌套时会产生“累积效应”，虽然提高了弹性，但也带来可维护性的挑战。
相比之下，rem以根元素字体大小为基准，能在全局范围内实现一致的缩放，降低层级对尺寸的影响，成为设计系统中的常用基石。
设计原则：在组件内优先使用 rem 来控制字体和间距，必要时用 px 进行微调，以保持栅格和线条的清晰。
本文聚焦从 px、rem、vw、vh 的实战应用与选择指南，帮助开发者在不同场景做出正确的单位选择。
:root {font-size: 16px; /* 1rem = 16px */
}
.container { padding: 1rem; margin: 0 auto; width: 90%; }
.title { font-size: 1.25rem; } /* 20px 在根为 16px 时 */
.button { padding: 0.5rem 1rem; border-radius: 0.25rem; }/* 以 px 定义细分边距，用于微调边界 */
.card { padding: 12px; border: 1px solid #ddd; }
响应式布局中的单位选择：vw、vh、% 与 clamp()
视窗单位与百分比在布局中的作用
视窗单位（vw、vh）基于当前视口宽高的百分比，非常适合实现全屏吸顶、背景区域和字体的自适应。
百分比单位（%）依赖父元素的尺寸，适用于多层嵌套的盒模型布局，如网格和列宽的自适应。
为了在不同屏幕下保持一致的视觉比例，常见做法是将字体和容器尺寸以 clamp() 约束在一个合理范围内，实现最小和最大界限之间的自适应。
/* 结合 vw/vh 与 clamp 实现自适应标题字号 */
:root {--min: 1.25rem;--max: 3rem;
}
.headline { font-size: clamp(var(--min), 2.5vw, var(--max)); }/* 使用百分比来实现一个自适应网格的列宽 */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(20%, 1fr)); }/* 全屏背景区域占满视口高度 */
.hero { height: 100vh; width: 100%; }
实战应用：从设计稿到工程落地
布局与组件的单位选型流程
在实际项目中，rem>作为全局基础单位，用来控制字体和大多数间距；px 则用于边界、阴影和细微微调，避免因放大导致锯齿。
对于响应式设计，结合 vw/vh 与 clamp() 可以显著减少断点数量，提升设计一致性。
通过 CSS 变量和设计系统的约束，可以把单位的选择统一化，提升团队的协作效率与代码可维护性。
:root {--base-font: 1rem; /* 16px 写死会带来可控性 */--gap: calc(0.5rem + 1vw);
}
@media (max-width: 768px) {:root { --base-font: 0.9375rem; }
}
.card { padding: var(--gap); font-size: clamp(0.875rem, 1vw + 0.5rem, 1rem); }
