rem与px区别及适用场景解析

珍惜时间，勤奋学习！今天给大家带来《CSS3字体单位rem与px区别及使用场景》，正文内容主要涉及到等等，如果你正在学习文章，或者是对文章有疑问，欢迎大家关注我！后面我会持续更新相关内容的，希望都能帮到正在学习的大家！

rem 是相对于根元素 font-size 的缩放单位，1rem 默认等于 16px，通过动态设置 html 字号可实现整体等比缩放，适用于响应式布局与无障碍适配；em 相对于父元素字号，易因嵌套导致级联失控，适合局部弹性排版；px 是设备独立像素，尺寸固定，适用于边框、圆角等非文本类样式。

rem 是相对于根元素 font-size 的缩放单位

浏览器默认根元素（html）的 font-size 是 16px，所以 1rem === 16px。只要改了 html 的 font-size，所有用 rem 定义的字体、间距都会等比缩放——这是它被广泛用于响应式布局的核心原因。

常见做法是配合 JS 动态设置：

document.documentElement.style.fontSize = 
  window.innerWidth / 375 * 16 + 'px'; // 以 375px 设计稿为基准

@media (max-width: 768px) {
  html { font-size: 14px; }
}
@media (min-width: 769px) {
  html { font-size: 16px; }
}

• 适合需要整体缩放的场景，比如移动端适配、无障碍放大模式支持
• 注意：嵌套组件中若手动修改了某层 font-size，不会影响 rem 计算——它只认 html 根字号
• Vue/React 项目里，如果用了 CSS-in-JS 或 scoped style，仍可正常使用 rem，但需确保根字号已正确设置

em 是相对于父元素 font-size 的相对单位

em 的值取决于直接父元素的 font-size。比如父元素是 20px，子元素写 1.5em，那它就是 30px；如果父元素本身也是用 em 设置的，就会产生级联计算，容易失控。

典型误用：

.box { font-size: 1.2em; } /* 相对于 body 或 html 的字号 */
.box p { font-size: 1.2em; } /* 这里是相对于 .box 的字号，不是原始根字号 */

• 适合局部弹性排版，比如按钮文字随容器缩放、图标字体与文本对齐
• 慎用于多层嵌套结构，尤其当父级 font-size 来自 em 或 % 时，数值会指数级漂移
• 和 line-height 搭配时，em 是推荐单位，因为它的行为更符合行高“相对于当前字号”的语义

px 是绝对像素单位，不随缩放或父级变化

px 在 CSS 中不是物理像素，而是设备独立像素（CSS pixel），在多数场景下表现稳定。它不会因为用户缩放网页、修改系统字体大小而改变尺寸——这既是优点也是缺点。

• 适合固定尺寸的图形、边框、阴影偏移等非文本类样式
• 不适合用于需要适配高 DPI 屏幕或支持系统字体放大的文本内容（比如 iOS「更大字体」辅助功能下，px 文字不会变大）
• 现代开发中，px 常和 rem 混用：用 rem 控制字号，用 px 控制 border、border-radius 等不影响阅读节奏的细节

实际项目中怎么选：看是否需要「可继承」或「可缩放」

判断逻辑很直接：如果这个尺寸应该随用户系统设置、页面整体缩放或设计稿比例变化，就用 rem；如果它只是某个组件内部的相对关系（比如图标比文字小一号），且不希望被外部干扰，优先考虑 em；如果它必须精确到像素级、且和文本流无关，用 px。

• 标题层级（h1~h6）、正文、段落间距 → 推荐 rem
• 按钮内边距、卡片圆角、分割线粗细 → 推荐 px
• 图标字体（如 iconfont）的 font-size → 推荐 em，方便与相邻文字自动对齐
• 媒体查询中的断点值 → 必须用 px（CSS 规范限定）

最易被忽略的一点：Chrome 开发者工具里，鼠标悬停在 computed 样式上时，会同时显示该值的 px 实际解析结果——这是验证你写的 rem/em 是否按预期生效的最快方式。

以上就是《rem与px区别及适用场景解析》的详细内容，更多关于的资料请关注golang学习网公众号！