如何用css rem与em单位控制文字大小_石家庄创泽智能科技有限公司

新闻中心 NEWS CENTER

2025-10-05

浏览次数：次

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

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

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

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

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

html { font-size: 16px; }p { font-size: 1rem; } /* 16px */h1 { font-size: 2rem; } /* 32px */small { font-size: 0.875rem; } /* 14px */

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

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

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

UXbot

AI产品设计工具

185 查看详情 UXbot

div { font-size: 1.2em; } /* 相对于父级 */div p { font-size: 1.2em; } /* 相对于 div 的字体大小，可能被放大两次 */

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

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

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