相对单位：em 与 rem
使用 em 和 rem 单位，根据父元素或根元素的字体大小设置元素尺寸。
相对单位：em 与 rem 是 CoddyKit 上的免费 CSS Academy 课时。 这是第 2 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 CSS Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 CSS Academy 课程共包含 4 节课。
什么是相对单位？
相对单位根据另一种测量值进行缩放，通常是某个元素或根元素的字体大小。它们可以实现可缩放、响应式的设计，并尊重用户设置。
em — 相对于父元素字体大小
em 相对于当前元素的字体大小（对于字体大小本身）或父元素（对于其他属性）。这可能会导致数值叠加。
<div class="parent">
Parent (20px)
<div class="child">
Child (1.5em = 30px)
<div class="grandchild">Grandchild (1.5em = 45px!)</div>
</div>
</div>
使用 em 设置间距
当 em 用于 padding、margin 或 border-radius 时，它相对于元素自身的字体大小。这会创建按比例缩放的组件。
<button class="button">Padded Button</button>
rem — 相对于根元素字体大小
rem（根 em）相对于根元素的字体大小（html）。它不会叠加，在整个页面中都具有可预测性。
<h1>Heading (2.5rem = 40px)</h1>
<p>Paragraph text (1rem = 16px)</p>
<small>Small print (0.75rem = 12px)</small>
rem 与用户无障碍设置
如果用户增大浏览器的基础字体大小（例如为了提高可读性，从 16px 调整到 20px），rem 单位会相应缩放，而固定的 px 单位不会。因此强烈建议使用 rem 进行排版。
以百分比设置 html 字体大小
将根字体大小设置为百分比，以尊重用户的浏览器设置：
<p>Root font-size respects the browser/user default (100%).</p>
如何选择 em 与 rem
实用指南：
- 使用
rem设置字体大小、间距令牌和布局尺寸 - 对于应随组件字体大小缩放的组件内部间距，使用
em（例如按钮的内边距）
媒体查询中的 em
以 em 指定的媒体查询会响应浏览器字体大小的变化。在默认设置下，48em 断点 = 768px，但如果用户更改了基础字体大小，断点也会随之调整。
<div class="layout">
<div>Column A</div>
<div>Column B</div>
</div>
计算 em
公式：desired px / parent px = em value。如果父元素为 16px，而您希望文本为 24px：24/16 = 1.5em。
<h2>Heading (24px via 1.5rem)</h2>
<p>Paragraph (18px via 1.125rem)</p>
em 的叠加问题
嵌套使用 em 大小的元素会使字体大小按乘法叠加。这就是字体大小更推荐使用 rem 的原因——它始终引用根元素，从而避免叠加。
ch — 字符宽度
ch 单位等于当前字体中字符“0”的宽度。它适合将文本容器限制在易读的行长范围内：
<p class="article-body">This paragraph is constrained to about 70 characters per line using the ch unit, which keeps text at a comfortable, readable line length regardless of font size.</p>
快速检查
一个按钮的 font-size: 1.25rem 和 padding: 0.5em。如果根字体大小为 16px，内边距是多少像素？
回顾
em 相对于当前元素的字体大小进行缩放（对于字体大小本身，则相对于父元素），因此可能发生叠加。rem 始终相对于根元素进行缩放，不会叠加。请使用 rem 设置排版和全局间距；使用 em 设置按比例缩放的组件内部间距。
用 AI 导师学习 CSS — 免费
在浏览器中编写并运行真实代码，获得全天候 AI 导师的即时帮助，并在网页或应用中继续学习。
- 课程
- 40
- 课程
- 159
常见问题解答
「相对单位：em 与 rem」课时是免费的吗？
是的 — 「相对单位：em 与 rem」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 CSS Academy 课程的其余内容，请升级到 CoddyKit PRO。 CSS Academy 课程共包含 4 节课。
「相对单位：em 与 rem」这节课中我会学到什么？
使用 em 和 rem 单位，根据父元素或根元素的字体大小设置元素尺寸。 你通过在浏览器中直接运行的动手代码来练习 CSS Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 CSS Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 CSS Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 2 节课，共 4 节。
「相对单位：em 与 rem」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 CSS Academy 课中编写并运行代码吗？
能。每节 CSS Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。
此课程中的所有课时
- 绝对单位：px、pt、cm
- 相对单位：em 与 rem
- 视口单位：vw、vh、dvh
- Min、Max 与 Clamp 函数