REM vs PX：网页布局里的“死板尺子”和“变形金刚”

内容分享1天前发布姜姜姜不爱吃姜

1 0 0

生活中的例子 01

爷爷奶奶把手机字体调大时的网页自动适配

生活中的例子 02

让一套代码同时在 iPhone 和 27寸显示器上完美排版

生活中的例子 03

设计师突然说：'把所有按钮和标题都放大20%'时的快速修改

新手入门指南

前端新手必修课：彻底搞懂 REM 和 PX 的爱恨情仇

REM vs PX：网页布局里的“死板尺子”和“变形金刚”

你好啊，未来的前端大神！👋

今天我们要聊一个让无数新手抓狂，但又绝对绕不开的话题：单位。特别是那个老顽固 px 和那个灵活的胖子 rem。

你是不是经常有这种困惑： > “为什么我的网页在我的电脑上看着挺好，发给老板，他在手机上一打开，字小得像蚂蚁？” > “为什么我看别人的代码里全是 0.625rem，这是什么神秘代码？”

别慌！哪怕你数学只有小学水平，看完这篇文章，你也绝对能成为单位换算大师。准备好你的咖啡，我们要开始这场长途旅行了！

—

第一部分：钩子（The Hook）—— 钢尺与橡皮筋的故事

在深入代码之前，我们先来做一个思想实验。

想象你是一个裁缝，你要给巨人做衣服，也要给蚂蚁做衣服。

场景 A：死板的裁缝（PX 用户）

这个裁缝手里只有一把钢尺。这把尺子的刻度是死的。

这种裁缝做衣服时会说：“袖子长度必须是 20厘米。”结果：这件衣服给正常人穿刚好。但是给巨人穿？袖子像护腕。给蚂蚁穿？袖子像隧道。这就是 PX (Pixels，像素)。它是绝对的，不听任何人的话，说多大就是多大。

场景 B：聪明的裁缝（REM 用户）

这个裁缝手里没有尺子，他只有一个比例表。

他做衣服时会说：“袖子的长度应该是 身体高度的 1/10。”结果：不管客户是巨人还是蚂蚁，只要告诉裁缝“身体高度”是多少，袖子就会自动调整到完美的比例。这就是 REM。它是相对的，它会根据一个“基准值”来自动缩放。

懂了吗？

PX = 既然定了就不改的“死规矩”。REM = 既然环境变了我也跟着变的“变形金刚”。

—

第二部分：到底什么是 REM？

让我们把术语拆开来看看。

PX: Pixel（像素）。屏幕上的一个小光点。20px 就是 20 个小光点排在一起。非常精确，但也非常死板。REM: Root EM（根元素的 EM）。

等等，什么叫“根元素”？

在 HTML 里，所有的标签（div, span, p）都住在一栋大楼里，这栋大楼的地基就是 <html> 标签。它就是“根（Root）”，也就是那个 Big Boss（大老板）。

REM 的核心逻辑只有一句话： > 1 rem = `<html>` 标签的字体大小

就这么简单！

如果浏览器默认 <html> 的字体大小是 16px（大多数浏览器都是这样），那么：

1rem = 16px2rem = 32px0.5rem = 8px

这就好像 rem 是大老板的小弟。大老板说：“今天基准价是 16块钱”，小弟 1rem 就值 16块。大老板明天心情好，说：“今天基准价涨到 20块”，小弟 1rem 瞬间就变成了 20块。

—

第三部分：为什么我需要 REM？（Why?）

你可能会问：“老湿，PX 挺好的啊，所见即所得，为什么我要去算那个该死的乘法？”

问得好！这里有三个理由让你放弃全盘使用 PX：

1. 尊重用户（Accessibility – 无障碍性）

有些视力不好的用户（比如你的爷爷奶奶），他们会在浏览器设置里把“默认字体大小”调成大号（比如 24px）。

如果你用 PX：你写死 font-size: 16px。浏览器会无视用户的设置，强行显示小字。用户会觉得：“这网站做的什么垃圾，看不清！”如果你用 REM：因为 rem 是跟着根元素走的，当用户把根元素默认字体调大，你的网页所有布局、按钮、文字都会自动跟着变大。用户会觉得：“哇，这网站真贴心！”

2. 响应式布局（Responsive Design）

如果你想做一个在手机上和电脑上都好看的网站。

用 PX：你需要写无数个 media query（媒体查询），手动去改每一个按钮的宽度。用 REM：你只需要在 CSS 里改一行代码（改变 html 的字体大小），整个页面的比例瞬间自动适配手机屏幕。

3. 维护的噩梦

设想老板让你把网站里所有的标题都放大一点点。

用 PX：你去改了 50 个文件里的 24px, 30px, 18px…用 REM：你去改一下根元素的定义。完事，下班。

—

第四部分：原理大解剖（Under the hood）

让我们来看看浏览器是怎么计算的。这其实是小学数学题。

默认情况

绝大多数浏览器（Chrome, Firefox, Safari）默认的 html 字体大小是 16px。

公式：目标像素值/16=REM值

比如你想写一个 32px 的标题： 32/16=2 所以你写 font-size: 2rem;

你想写一个 24px 的边距： 24/16=1.5 所以你写 margin: 1.5rem;

痛苦的数学

但是，假如设计师给你画了一个 14px 的字，或者 10px 的边距。 14/16=0.875rem 10/16=0.625rem

天哪！每次写代码都要拿出计算器除以 16？这太反人类了！这就导致很多人讨厌 REM。

别急！在后面的代码游乐场里，我会教你一个“作弊技巧”，让数学变得比 1+1 还简单。

—

第五部分：代码游乐场（Code Playground）

我们要开始写代码了！打开你的编辑器（VS Code），或者在脑子里跟着我敲。

第 1 关：Hello World（PX vs REM）

我们先来看看 PX 和 REM 在默认情况下有什么区别。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<style>
  /* 
   * 浏览器的默认设置（你看不见，但它存在）：
   * html { font-size: 16px; }
   */

  .box-px {
    /* 绝对单位：永远是 32像素 */
    font-size: 32px;
    border: 1px solid red;
    margin-bottom: 20px;
  }

  .box-rem {
    /* 相对单位：2 * 16px = 32像素 */
    font-size: 2rem;
    border: 1px solid blue;
  }
</style>
</head>
<body>

  <div class="box-px">
    我是 PX 盒子：不管发生什么，我都是 32px。
  </div>

  <div class="box-rem">
    我是 REM 盒子：我是 Boss (html) 的两倍大。
  </div>

</body>
</html>

在这个阶段，它们看起来一模一样。 都是 32px 大小。无聊吗？好戏在后头。

—

第 2 关：见证奇迹（修改 Root）

现在，我们来模拟“响应式设计”。假设我们在手机上，想让所有字小一点。或者我们在 4K 屏幕上，想让所有字大一点。

我们要使用 CSS 媒体查询 (Media Query)。

/* 默认情况 (电脑) */
html {
  font-size: 16px; /* 1rem = 16px */
}

/* 当屏幕宽度小于 600px (比如手机) */
@media (max-width: 600px) {
  html {
    font-size: 12px; /* 变身！现在 1rem = 12px 了！ */
  }
}

/* 应用到上面的盒子 */
.box-px {
  font-size: 32px; /* 依然是 32px，在手机上会显得巨大，不仅丑还可能撑破屏幕 */
}

.box-rem {
  font-size: 2rem; 
  /* 
     在电脑上：2 * 16 = 32px
     在手机上：2 * 12 = 24px 
     自动变小了！完美适配！
  */
}

看到了吗？我们没有修改 `.box-rem` 的任何代码，它自己就变了。这就是 REM 的魔力——牵一发而动全身。

—

第 3 关：那个传说中的“62.5%”魔法（必学技巧！）

刚才说了，除以 16 太难算了。程序员都是懒人，所以大神们发明了一个“作弊技巧”。

如果我们将 html 的字体大小设置为 10px，那计算是不是就简单了？

1.4rem = 14px2.0rem = 20px0.5rem = 5px

只要把小数点往左移一位就行了！

但是，直接写 html { font-size: 10px; } 有个小问题，它会覆盖掉用户在浏览器里的设置（Accessibility 问题）。

完美的解决方案是使用百分比：

由于默认是 16px，如果你想得到 10px： 10/16=0.625 也就是 62.5%。

这是行业标准写法（Right Way）：

html {
  /* 
    魔法代码！
    16px * 62.5% = 10px 
    现在，1rem 约等于 10px。
  */
  font-size: 62.5%;
}

body {
  /* 
    因为 html 变成了 10px，如果你不重置 body，
    网页里的字会太小看不见。
    所以我们把 body 设回 16px (1.6 * 10px)
  */
  font-size: 1.6rem; 
}

/* 现在开始写布局，心算无压力 */
.header {
  height: 8rem;      /* 80px */
  padding: 2rem;     /* 20px */
  font-size: 2.4rem; /* 24px */
}

.btn {
  width: 15rem;      /* 150px */
  border-radius: 0.5rem; /* 5px */
}

这是错误的写法（Wrong Way）：

/* 错误示范 */
.btn {
   /* 混合双打：又用 px 又用 rem，维护火葬场 */
   width: 200px;
   height: 3rem;
   padding: 10px;
   font-size: 1.2rem;
}

建议：要么全站主要用 rem 做布局，要么只在字体上用 rem。不要毫无逻辑地混用。

—

第六部分：新手常犯的坑（Gotchas）

哪怕你觉得懂了，下面这些坑你肯定还会踩：

1. 1px 边框消失之谜

不要把非常细微的尺寸（比如 1px 的边框）转换成 rem。如果你写 border: 0.1rem solid black (即 1px)，在某些高分辨率屏幕或者缩放比例下，浏览器计算出来可能是 0.8px，有些浏览器就会四舍五入变成 0px。结果就是——边框不见了。

解决方法：细小的边框、极小的阴影，依然使用 px。1px 永远是安全的。

2. REM 和 EM 的混淆

还有一个单位叫 em。千万别搞混！

REM (Root EM): 永远只听 html (大老板) 的话。EM: 听 父元素 (爸爸) 的话。

<div>
   <!-- 这里用了 em -->
   <p>我是多大？</p>
</div>

这里的 p 会是 20px * 2 = 40px。如果你嵌套了很多层，em 会一直相乘（父 * 子 * 孙），最后你会得到一个巨大的失控的文字。新手建议：无脑用 REM，少用 EM，除非你非常清楚自己在做什么。

3. 浏览器最小字体限制

Chrome 浏览器默认有一个设置：最小字体大小通常是 12px。如果你用 62.5% 的技巧，html 实际上变成了 10px，但在 Chrome 里它可能强行显示为 12px。这会导致你的计算在小尺寸上有细微偏差。 *不用太担心这个，只要你的正文（body）设置了 1.6rem (16px)，布局通常不会崩。*

—

第七部分：Q&A 环节（你想问的都在这）

Q: 老湿，既然 REM 这么好，我是不是应该把所有的 `px` 甚至 `%` 都换成 `rem`？

A: 别走极端！

布局宽度（比如两栏布局）：通常用 % 或者 Flexbox/Grid 更合适。字体大小、内边距 (padding)、外边距 (margin)、按钮大小：这是 rem 的主场。超细边框：用 px。

Q: 图片 (Image) 需要用 rem 设宽高吗？

A: 通常不需要。图片我们一般用 width: 100% 让它自适应容器，或者固定 px。不过如果你想让图标随着字号变大而变大，用 rem 设图标宽高是个好主意。

Q: 现在的开发工具不能自动帮我算吗？

A: 当然可以！如果你用 VS Code，有很多插件（比如 “px to rem”）。你输入 20px，按个快捷键，它自动帮你变成 1.25rem（或者根据你的设置变）。现在的构建工具（如 PostCSS）甚至可以让你写代码时写 px，打包时自动转成 rem。但你需要先理解原理，才能驾驭工具。

—

第八部分：总结（Summary）

好了，让我们回顾一下今天的旅程：

Px 是死板的钢尺，适合画细线，但在响应式大潮下显得力不从心。Rem 是听话的变形金刚，它只听 html 根元素的话。Rem 的核心优势是：牵一发而动全身。改一个数字，全站适配。62.5% 技巧：设置 html { font-size: 62.5% }，让 1rem ≈ 10px，从此告别计算器。

下次当你写网页的时候，试着放弃那几个 px，用上 rem。当你发现在手机预览模式下，你的网页像水一样流畅地适应了屏幕，那种成就感会让你爱上前端开发的！

去吧，少年！把你的网页变成“变形金刚”！🚀