px em rem一、核心概念与本质区别三者都是CSS中用于设置尺寸（如字体大小、宽高、间距）的单位，核心区别在于基准

一、核心概念与本质区别

三者都是CSS中用于设置尺寸（如字体大小、宽高、间距）的单位，核心区别在于基准值的来源：

单位	基准值（参考标准）	本质特点
px	屏幕物理像素（1px对应屏幕上的一个像素点）	固定单位，不随其他元素变化
em	父元素的字体大小（`font-size`）	相对单位，受父元素影响
rem	根元素（`<html>`）的字体大小	相对单位，仅受根元素影响

二、具体特性与换算规则

1. px（像素）

特性：
- 固定单位，1px在不同设备上的物理大小可能不同（取决于屏幕分辨率和缩放比例）；
- 例：font-size: 16px 表示字体大小为16像素，不受其他元素影响。
适用场景：
- 需要精确控制尺寸的场景（如边框宽度、图标大小）；
- 不希望尺寸随字体大小变化的固定布局。

2. em（相对父元素）

换算规则：1em = 父元素的font-size值（默认情况下，浏览器根元素<html>的font-size为16px，若父元素未设置，则继承根元素值）。
- 例：父元素font-size: 20px，则子元素1em = 20px，0.5em = 10px。

特点：

具有“继承传递性”：若多层嵌套，子元素的em会逐层继承父元素的字体大小，可能导致计算复杂。

例：

.parent { font-size: 20px; } /* 父元素 */
.child { font-size: 1.5em; } /* 1.5×20px = 30px */
.grandchild { font-size: 0.8em; } /* 0.8×30px = 24px（继承child的30px） */

适用场景：
- 局部组件内的尺寸联动（如按钮内的文字与padding按比例调整）；
- 需要根据父元素动态变化的场景（如卡片内的文本与间距）。

3. rem（相对根元素）

换算规则：1rem = 根元素（<html>）的font-size值（默认16px，可手动修改）。
- 例：<html style="font-size: 10px">，则任何元素的1rem = 10px，1.2rem = 12px。
特点：
- 无继承传递性，所有元素的rem基准值统一，计算简单；
- 可通过修改根元素font-size实现全局尺寸缩放（响应式核心用法）。
适用场景：
- 响应式布局（通过媒体查询动态修改根元素font-size，适配不同屏幕）；
- 全局统一尺寸控制（如全站字体、间距按rem设置，方便整体调整）。

三、响应式布局中的实践（高频考点）

rem是响应式布局的核心工具，通过动态修改根元素font-size实现“一套代码适配多端”：

/* 基础设置：1rem = 10px（简化计算） */
html { font-size: 10px; }

/* 移动端（默认）：根元素10px → 1rem=10px */
.box { width: 30rem; } /* 300px */

/* 平板（768px以上）：根元素放大至12px → 1rem=12px */
@media (min-width: 768px) {
  html { font-size: 12px; }
  /* .box宽度自动变为30×12=360px，无需单独修改 */
}

/* 桌面端（1200px以上）：根元素16px → 1rem=16px */
@media (min-width: 1200px) {
  html { font-size: 16px; }
}

四、问题

1. 问：em和rem的核心区别是什么？

答：基准值来源不同。em基于父元素的font-size，存在继承传递性（多层嵌套计算复杂）；rem基于根元素的font-size，全局统一基准，更适合响应式布局。

2. 问：为什么响应式布局常用rem而不是px？

答：px是固定单位，适配不同屏幕需逐个修改尺寸；rem通过修改根元素font-size可全局缩放所有尺寸，减少代码冗余，实现“一处修改，处处生效”。

3. 问：如何解决rem在低版本浏览器（如IE8）的兼容性问题？

答：IE8及以下不支持rem，可通过px作为降级方案：

.box {
  font-size: 16px; /* IE8及以下用px */
  font-size: 1rem; /* 现代浏览器用rem */
}

4. 问：设计稿为750px宽，如何设置rem的基准值？

答：常见方案是“1rem = 100px”（简化计算）：
- 设计稿中100px → 1rem；
- 根元素设置font-size: (100 / 750) * 100vw（动态根据屏幕宽度计算，实现自适应）。

五、总结话术

“px、em、rem的核心区别在于基准值：

px是固定像素，适合精确尺寸（如边框）；
em相对父元素，适合局部组件内的尺寸联动；
rem相对根元素，是响应式布局的核心，通过修改根元素字体大小实现全局适配。

实际项目中，我会结合使用：px用于固定细节（如1px边框），rem用于全局尺寸（如字体、宽高），em用于组件内比例（如按钮的padding与字体大小关联），兼顾精确性和响应式需求。”