如何用css rem与em单位控制文字大小

rem相对于根元素字体大小，用于全局一致的响应式设计；em相对于父元素字体大小，适合局部弹性布局。选择依据：rem控制文本层级，em处理间距与图标等随文字变化的场景。

在CSS中，rem 和 em 是相对单位，用于更灵活地控制文字大小，尤其适合响应式设计和可访问性优化。它们不是固定像素值，而是相对于某个基准计算出来的，理解它们的差异和使用场景是关键。

rem：相对于根元素字体大小

rem（root em）是相对于HTML根元素（即 html 元素）的字体大小。默认情况下，大多数浏览器将根字体大小设为16px，因此 1rem = 16px。

你可以通过设置 html 的字体大小来统一调整整个页面的缩放比例：

这种方式的好处是全局一致性。修改根字体大小后，所有使用 rem 的元素会等比缩放，非常适合实现“一键放大字体”或适配不同屏幕尺寸。

立即学习“前端免费学习笔记（深入）”；

em：相对于父元素字体大小

em 是相对于当前元素的父元素字体大小。如果父元素字体是16px，那么 1em = 16px；如果父元素是18px，那么 1em = 18px。

文心大模型

百度飞桨-文心大模型 ERNIE 3.0 文本理解与创作

56

查看详情

em 具有“继承叠加”特性，容易产生嵌套放大问题。例如：

这种特性在某些场景很有用，比如按钮内的图标随文字一起缩放，但用于多层嵌套的文字排版时要小心失控。

如何选择 rem 与 em

根据使用目的合理选择单位，能提升维护性和用户体验：

• 用 rem 控制整体文字层级（如标题、段落、小字），保证布局稳定和可预测。
• 用 em 处理局部相对尺寸，比如图标、边距、内边距随文字变化而变化。
• 例如让按钮的 padding 随字体变大而自动调整：
  button { font-size: 1.2rem; padding: 0.5em 1em; }
  这样无论按钮字体多大，内边距都成比例。

实用建议

结合 rem 的全局控制和 em 的局部弹性，可以构建更健壮的样式系统：

• 在根元素上设置基准字号，如 html { font-size: 16px; }，便于计算。
• 使用 rem 定义文本组件的字体大小，避免嵌套影响。
• 用 em 调整间距或装饰性元素，使其与文字协调。
• 考虑可访问性，避免固定 px，让用户浏览器设置能生效。

基本上就这些。掌握 rem 和 em 的核心区别——一个是“根参考”，一个是“父参考”，就能更自由地设计可伸缩的界面。不复杂但容易忽略细节。

以上就是如何用css rem与em单位控制文字大小的详细内容，更多请关注php中文网其它相关文章！