[已解决]css中font-size属性px、em、rem有什么区别

变西瓜 · 发表于 12 小时前

最佳答案

Screenager

12 小时前

在 CSS 中，font-size 属性可以使用 px、em 和 rem 作为单位，它们的区别如下：

1. px（像素）
绝对单位：px 是固定大小的单位，1px 等于屏幕上的一个像素点。

不受父元素或根元素影响：设置 font-size: 16px 会始终渲染为 16 像素，无论父元素或 HTML 根元素的字体大小如何变化。

优点：精确控制大小，适合需要固定尺寸的场景（如边框、图标）。

缺点：在用户调整浏览器默认字体大小时，px 不会自适应，可能导致可访问性问题。
2. em（相对父元素）
相对单位：1em 等于当前元素的父元素的 font-size 值。

继承性：如果父元素的 font-size 改变，子元素的 em 值会随之变化。

复合效果：多层嵌套时，em 会逐级相乘（可能导致意外的放大或缩小）。

适用场景：适合组件内部的相对调整（如按钮内图标大小随按钮文字变化）。
3. rem（相对根元素）
相对单位：1rem 等于 HTML 根元素（<html>）的 font-size 值（默认通常是 16px）。

不依赖父元素：直接参考根元素，避免 em 的嵌套问题。

优点：易于全局控制，适合响应式设计（通过修改根元素的 font-size 调整所有 rem 单位）。

推荐场景：全局布局、字体大小等需要一致性的场景。
最佳实践
优先使用 rem：确保可访问性和响应式布局，尤其是字体大小。

谨慎使用 em：仅在需要相对于父元素调整时使用（如行高、间距）。

px 用于非文本元素：如边框、阴影等不需要缩放的属性。

跳转到最佳答案楼层

Screenager · 发表于 12 小时前

这个最佳答案由 Screenager 给出，感谢 Screenager 的回答。

单击隐藏图章

在 CSS 中，font-size 属性可以使用 px、em 和 rem 作为单位，它们的区别如下：

1. px（像素）
绝对单位：px 是固定大小的单位，1px 等于屏幕上的一个像素点。

不受父元素或根元素影响：设置 font-size: 16px 会始终渲染为 16 像素，无论父元素或 HTML 根元素的字体大小如何变化。

优点：精确控制大小，适合需要固定尺寸的场景（如边框、图标）。

缺点：在用户调整浏览器默认字体大小时，px 不会自适应，可能导致可访问性问题。
2. em（相对父元素）
相对单位：1em 等于当前元素的父元素的 font-size 值。

继承性：如果父元素的 font-size 改变，子元素的 em 值会随之变化。

复合效果：多层嵌套时，em 会逐级相乘（可能导致意外的放大或缩小）。

适用场景：适合组件内部的相对调整（如按钮内图标大小随按钮文字变化）。
3. rem（相对根元素）
相对单位：1rem 等于 HTML 根元素（<html>）的 font-size 值（默认通常是 16px）。

不依赖父元素：直接参考根元素，避免 em 的嵌套问题。

优点：易于全局控制，适合响应式设计（通过修改根元素的 font-size 调整所有 rem 单位）。

推荐场景：全局布局、字体大小等需要一致性的场景。
最佳实践
优先使用 rem：确保可访问性和响应式布局，尤其是字体大小。

谨慎使用 em：仅在需要相对于父元素调整时使用（如行高、间距）。

px 用于非文本元素：如边框、阴影等不需要缩放的属性。

BrendanEich · 发表于 11 小时前

CSS中font-size的px、em、rem区别

px（像素）
绝对单位，1px等于屏幕上的一个物理像素点。
font-size: 16px; 固定大小，不受父级或根元素影响。
em（相对父元素）
相对单位，1em等于父元素的字体大小。
font-size: 1.2em; 会基于父元素字体计算（如父元素16px → 19.2px）。
rem（相对根元素）
相对单位，1rem等于根元素（html）的字体大小。
font-size: 1.5rem; 始终基于html的字体计算（默认16px → 24px）。

使用场景：

px：需要固定尺寸时（如边框）
em：组件内部需要比例缩放时
rem：全局响应式布局时（推荐）

html { font-size: 16px; }
.parent { font-size: 20px; }
.child-em { font-size: 0.8em; } /* 实际16px (20px × 0.8) */
.child-rem { font-size: 0.8rem; } /* 实际12.8px (16px × 0.8) */

复制代码

以上回复来自 FishC AI 小助理，如未能正确解答您的问题，请继续追问。

账号		自动登录	找回密码
密码			立即注册

[已解决]css中font-size属性px、em、rem有什么区别

最佳答案

浏览过的版块