文章中英模式

布鲁斯前端面试题目 - px vs rem vs em 详解

深入了解CSS中px、rem和em单位的差异、使用场景与响应式设计实践，掌握现代网页开发中各种长度单位的精确应用。

文章中英模式

懒得看文章？那就来看视频吧

CSS长度单位的基本概念

CSS提供了多种设置元素尺寸的单位，它们可以分为绝对单位（如px）和相对单位（如em、rem、%）。理解这些单位的特性及适用场景，对于创建响应式且可访问的网页至关重要。

本文将重点介绍三种最常用的长度单位：px、em和rem，它们的差异以及各自的优缺点。

像素（px）- 固定的绝对单位

像素（px）是CSS中最基本的绝对单位，表示屏幕上的一个物理显示点。

px特性

1. 固定大小，不受外部因素影响
2. 1px在不同的屏幕密度下可能有不同的实际大小
3. 不随用户设置的字体大小变化
4. 精确控制元素大小

.button {
  width: 200px;    
  height: 50px;    
  font-size: 16px; 
  padding: 10px;   
  border-radius: 4px; 
}

px的优点

1. 精确控制元素尺寸
2. 稳定且可预测的表现
3. 适合需要像素级别精确的设计
4. 直观易懂，数值即视觉大小

px的缺点

1. 缺乏响应式特性，不随窗口变化
2. 不随用户的字体大小设置变化
3. 在高DPI屏幕可能呈现不一致
4. 不利于实现无障碍设计

em - 相对于父元素的单位

em是一种相对单位，相对于元素的父元素的字体大小。1em等于父元素的字体大小。

em特性

1. 相对于父元素的字体大小
2. 具有继承性和级联效果
3. 可用于创建比例关系的设计
4. 在嵌套元素中会产生复合效果

body {
  font-size: 16px; /* 基准字体大小 */
}

.parent {
  font-size: 20px; /* 新的基准 */
}

.child {
  font-size: 1.5em;  /* = 20px * 1.5 = 30px */
  margin: 1em;       /* = 30px * 1 = 30px (因为margin相对于自身字体大小) */
}

.grandchild {
  font-size: 1.5em;  /* = 30px * 1.5 = 45px (注意这里的复合效果) */
}

em的优点

1. 能创建比例一致的设计
2. 适合定义元素内部的相对尺寸
3. 在元素缩放时保持内部比例
4. 可以根据父元素调整大小

em的缺点

1. 复合效应可能导致难以预测的结果
2. 嵌套元素的尺寸计算复杂
3. 需要谨慎管理继承关系
4. 不易于全局一致的响应式设计

rem - 相对于根元素的单位

rem（root em）是相对于根元素（html）的字体大小的单位。1rem等于根元素的字体大小。

rem特性

1. 相对于根元素的字体大小
2. 不受元素嵌套层级的影响
3. 便于全局控制网站的比例
4. 简化响应式设计的实现

html {
  font-size: 16px; /* 根元素字体大小 */
}

@media (max-width: 768px) {
  html {
    font-size: 14px; /* 小屏幕上调整根字体大小 */
  }
}

.title {
  font-size: 2rem;   /* = 16px * 2 = 32px (在大屏幕) */
                     /* = 14px * 2 = 28px (在小屏幕) */
}

.container {
  width: 50rem;      /* = 16px * 50 = 800px (在大屏幕) */
                     /* = 14px * 50 = 700px (在小屏幕) */
  padding: 1.5rem;   /* = 16px * 1.5 = 24px (在大屏幕) */
                     /* = 14px * 1.5 = 21px (在小屏幕) */
}

rem的优点

1. 易于全局控制所有元素的比例
2. 不受嵌套影响，计算简单
3. 非常适合响应式网站设计
4. 支持用户自订字体大小的无障碍设计

rem的缺点

1. 不能基于父元素创建局部比例关系
2. IE8及以下浏览器不支持
3. 过度依赖于根元素设置
4. 可能需要JavaScript辅助实现高级响应式行为

单位对比：何时使用px、em还是rem？

单位	适用场景	优势
`px`	边框、阴影、一像素线条	精确控制视觉元素
	媒体查询断点	基于设备尺寸的精确值
	小型装饰元素	不需随字体变化的元素
`rem`	字体大小	全站一致缩放，支持用户自订
	按钮、输入框	保持表单元素一致响应
	容器尺寸、间距	整体布局响应式调整
`em`	元素内部间距	与元素字体大小成比例
`em`	图标、局部元素	与周围文本保持比例关系

最佳实践是混合使用这些单位，针对不同的元素和目的选择最合适的单位。现代网页设计中，常见的方法是：

1. 使用rem作为全局比例的基础（字体大小、间距、容器尺寸）
2. 使用em处理与特定元素字体相关的排版细节
3. 使用px处理需要精确控制的小元素和视觉细节
4. 使用%处理响应式布局的宽度和弹性元素

使用rem实现响应式设计

rem单位在响应式设计中特别有用，因为通过改变根元素的字体大小，我们可以同时按比例调整整个网站的元素大小。

/* 基于窗口宽度动态设置根字体大小 */
html {
  /* 默认字体大小 */
  font-size: 16px;
}

/* 平板设备 */
@media (max-width: 992px) {
  html {
    font-size: 15px;
  }
}

/* 手机设备 */
@media (max-width: 576px) {
  html {
    font-size: 14px;
  }
}

/* 或使用vw单位使字体大小流畅缩放 */
html {
  /* 基准为16px（在窗口宽度为1000px时） */
  font-size: calc(14px + 0.2vw);
}

/* 然后所有使用rem的元素都会自动响应 */
.container {
  width: 70rem; /* 会随根字体大小变化 */
  padding: 2rem;
}

.heading {
  font-size: 2.5rem;
  margin-bottom: 1.5rem;
}

🔥 常见面试题目

(一) 解释px、em和rem之间的主要区别

答：px、em和rem的主要区别在于它们的参考基准：

px（像素） 是绝对单位，表示屏幕上的一个物理点。1px始终是固定大小，不受任何元素的字体大小影响。
em 是相对单位，相对于当前元素的父元素的字体大小。例如，如果父元素的字体大小是16px，那么子元素的1em就等于16px。em具有继承性，在嵌套元素中会产生复合效果。
rem 是相对单位，相对于根元素（html）的字体大小。所有的rem值都统一参考根元素字体大小，不受元素嵌套的影响。比如，如果html的字体大小是16px，那么1rem就等于16px，无论这个元素在文档中的嵌套位置如何。

这些区别决定了它们的适用场景：px适合精确控制，em适合元素内部的比例关系，rem适合全局一致的响应式设计。

(二) em和rem在嵌套元素中的表现有何不同？

答：em和rem在嵌套元素中的主要区别是：

em单位会产生复合效应：

/* 假设body的字体大小是16px */
.parent {
  font-size: 1.5em; /* = 16px * 1.5 = 24px */
}

.child {
  font-size: 1.5em; /* = 24px * 1.5 = 36px */
}

.grandchild {
  font-size: 1.5em; /* = 36px * 1.5 = 54px */
}

rem单位不受嵌套影响，始终参考根元素大小：

/* 假设html的字体大小是16px */
.parent {
  font-size: 1.5rem; /* = 16px * 1.5 = 24px */
}

.child {
  font-size: 1.5rem; /* = 16px * 1.5 = 24px (仍然参考根元素) */
}

.grandchild {
  font-size: 1.5rem; /* = 16px * 1.5 = 24px (仍然参考根元素) */
}

这种差异使rem更适合全局一致的大小控制，而em适合在特定元素内部创建比例关系。比如，可以用rem设置全局字体大小，用em设置段落内的标题、列表等元素，使它们与周围内容保持一致比例。

(三) 为什么在响应式设计中rem单位比px更受推荐？

答：在响应式设计中，rem单位比px更受推荐，原因如下：

优势	说明
全局比例缩放	通过仅改变根元素字体大小，网页上所有使用rem的元素都会成比例调整，简化媒体查询
无障碍性支持	尊重用户的字体大小设置，对有视力障碍的用户更友好
维护性	更容易维护比例一致的设计系统，因为所有尺寸都基于同一个参考值
设备适配性	更容易适应不同尺寸的设备，不需要为每个元素单独设置断点
流畅的缩放	结合vw等单位设置html的字体大小，可以实现元素尺寸随窗口大小流畅缩放

实际开发中，常见的模式是使用rem设置布局尺寸和文本大小，然后使用媒体查询调整根字体大小，从而一次性调整整个页面的比例。这比使用px单独调整每个元素更高效且一致。