Css常用单位速查表

CSS 单位全景速查表。为了方便记忆和查找，我将它们分成了四大类。

📊 1. 核心常用 (黄金三角)

现代网页开发中使用频率最高，建议作为默认选择。

单位	全称	定义	最佳使用场景
rem	Root EM	相对于 html根标签 的字号 (默认16px)	首选单位。用于字体大小、内边距(padding)、外边距(margin)。方便做全局缩放。
px	Pixels	屏幕上的一个像素点 (逻辑像素)	边框 (border)、阴影 (box-shadow)、特定不需要缩放的最小尺寸。
vh	Viewport Height	视口高度的 1%	首屏大图 (Hero Section)、全屏背景、沉底页脚。

---

📱 2. 屏幕适配 (视口单位)

基于浏览器窗口大小，做响应式和移动端适配的神器。

单位	全称	定义	最佳使用场景
vw	Viewport Width	视口宽度的 1%	强制全宽元素、响应式大标题字体。
dvh	Dynamic VH	动态视口高度 (自动扣除手机地址栏)	手机网页的全屏设计 (替代vh解决手机浏览器地址栏遮挡问题)。
vmin	Viewport Min	vh 和 vw 中较小的那个	手机横竖屏切换时，确保元素始终能放入屏幕中。
vmax	Viewport Max	vh 和 vw 中较大的那个	确保背景图始终覆盖整个屏幕。

---

🎨 3. 字体与排版 (相对单位)

相对于文字进行计算，保证排版的比例感和阅读体验。

单位	全称	定义	最佳使用场景
em	Parent EM	相对于 父元素 的字号	组件内部。如按钮的 padding，改字号时按钮大小会自动协调变化。
ch	Character	数字 0 的宽度	限制文章宽度。max-width: 65ch 是黄金阅读法则 (一行不超65字)。

---

🏗️ 4. 网格与布局 (容器单位)

用于构建页面骨架。

单位	全称	定义	最佳使用场景
%	Percentage	相对于 父容器	流式布局的宽度。注意：高度用百分比往往需要父容器有固定高。
fr	Fraction	剩余空间的“一份” (Grid布局专用)	Grid 布局。1fr 2fr (1:2分配)，比算百分比简单得多。

---

🏆 总结：现代开发最佳实践组合

如果不想记太多，只记这一套组合拳即可应付 95% 的开发场景：

1. 字体 & 间距：全部用 rem。
2. 边框线：用 px。
3. 首屏大背景：用 100vh (电脑) 或 100dvh (手机)。
4. 左右分栏布局：用 Grid 布局配合 fr。
5. 防止文章太宽难读：用 ch。