课程概览
CSS 单位与响应式尺寸课程
系统学习 CSS 单位实用流程：px、rem、em、%、vw、vh、root 字号上下文、clamp() fluid 尺寸，以及响应式布局调试。
本课程把 CSS 单位当作前端交付问题 来讲，而不是单纯的计算器练习。设计稿通常给 px，代码库更常用 rem、em 或 fluid 值；布局还依赖视口宽度、父级字号和断点行为。
你将学习何时使用 px、rem、em、%、vw、vh；root 字号如何改变计算结果；clamp() 如何生成 fluid 排版与间距；以及在把 CSS 粘贴进组件库或设计系统前如何验证换算是否正确。
适合谁
- 把 Figma 或设计稿转成 CSS 的前端开发者
- 维护 rem 令牌组件库的工程师
- 需要响应式字号与间距、又不想堆叠临时 media query 的全栈开发者
- 正在排查「为什么这个 rem 在移动端看起来不对？」的人
你将学到
- CSS 单位是什么，以及浏览器如何计算它们
- px、rem、em 在排版与组件中的取舍
- vw、vh 与百分比单位在布局上下文中的用法
- Root 字号与 px → rem 换算流程
- 用
clamp()实现 fluid 字号与间距 - 交付 CSS 前的实用调试流程
阅读时可以配合 CSS 单位换算 / Clamp 生成器 练习。目标不是只换算一个数值，而是理解让 CSS 长度在生产环境中正确的上下文。