rem相对于根元素字体大小，用于全局一致的响应式设计；em相对于父元素字体大小，适合局部弹性布局。选择依据：rem控制文本层级，em处理间距与图标等随文字变化的场景。
在CSS中，rem 和 em 是相对单位，用于更灵活地控制文字大小，尤其适合响应式设计和可访问性优化。它们不是固定像素值，而是相对于某个基准计算出来的，理解它们的差异和使用场景是关键。
rem：相对于根元素字体大小
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：相对于父元素字体大小
em 是相对于当前元素的父元素字体大小。如果父元素字体是16px，那么 1em = 16px；如果父元素是18px，那么 1em = 18px。
九歌
九歌–人工智能诗歌写作系统
322 查看详情
em 具有“继承叠加”特性，容易产生嵌套放大问题。例如：
div { font-size: 1.2em; } /* 相对于父级 */div p { font-size: 1.2em; } /* 相对于 div 的字体大小，可能被放大两次 */
这种特性在某些场景很有用，比如按钮内的图标随文字一起缩放，但用于多层嵌套的文字排版时要小心失控。
如何选择 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中文网其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1030733.html
微信扫一扫 
支付宝扫一扫 
