REM vs PX：网页布局里的“死板尺子”和“变形金刚”
生活中的例子 01
爷爷奶奶把手机字体调大时的网页自动适配
生活中的例子 02
让一套代码同时在 iPhone 和 27寸显示器上完美排版
生活中的例子 03
设计师突然说：'把所有按钮和标题都放大20%'时的快速修改
新手入门指南
前端新手必修课：彻底搞懂 REM 和 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 的核心逻辑只有一句话： >&n