工作原理
PX（像素）和 REM（Root EM）是 CSS 中两种重要的长度单位。PX 是绝对单位，而 REM 是相对于根元素（<html>）字体大小的相对单位。
转换公式
PX → REM: REM = PX ÷ 根字体大小
REM → PX: PX = REM × 根字体大小
例如：根字体为 16px 时，32px = 2rem，1.5rem = 24px
为什么使用 REM？
- 响应式设计：只需调整根字体大小，整个页面比例自动缩放
- 用户可访问性：尊重用户浏览器字体大小设置（无障碍设计）
- 易于维护：统一的缩放比例，减少媒体查询数量
- 更好的可读性：文本和布局保持协调的比例关系
使用场景
响应式布局
在移动端、平板、桌面端使用统一的 REM 值，通过调整根字体实现完美适配。
无障碍设计
遵循 WCAG 标准，让视力障碍用户可以自由调整浏览器字体大小而不破坏布局。
组件库开发
构建可复用的 UI 组件时使用 REM，确保组件在不同项目中保持灵活性。
设计稿转换
将 Figma、Sketch 等设计工具中的 PX 值快速转换为开发所需的 REM 值。
CSS 框架迁移
将遗留项目的 PX 单位批量转换为 REM，提升代码的现代化和可维护性。
主题系统
为多主题网站设置不同的根字体大小，实现"小号/中号/大号"字体模式切换。
常见问题
REM 和 EM 有什么区别？
REM 相对于根元素（
<html>）的字体大小，而 EM
相对于父元素的字体大小。REM 更加可预测和易于维护，不会因为嵌套层级而产生复合计算问题。
浏览器的默认根字体大小是多少？
大多数现代浏览器的默认根字体大小是 16px。但用户可以在浏览器设置中修改这个值，使用 REM 可以尊重用户的个性化设置。
如何在项目中设置根字体大小？
在 CSS 中对
html 元素设置 font-size
即可。例如：html { font-size: 16px; }。移动端常用 font-size: 62.5%;（10px），方便计算。
所有 CSS 属性都应该用 REM 吗？
不一定。字体大小、内边距（padding）、外边距（margin） 适合用 REM。而 边框（border） 通常用
PX（1px 边框更精确）。媒体查询断点也建议用 EM 或 PX。
REM 在所有浏览器中都兼容吗？
REM 单位在 IE9+ 及所有现代浏览器中都得到支持。如果必须兼容 IE8，可以使用 PX 作为后备方案（CSS Polyfill）。
使用 REM 会影响性能吗？
不会。浏览器在渲染时会将 REM 转换为绝对值（PX），性能差异可以忽略不计。现代浏览器的渲染引擎对相对单位优化得很好。
移动端 REM 适配方案的原理是什么？
常见方案是用 JavaScript
根据屏幕宽度动态设置根字体大小。例如：
document.documentElement.style.fontSize = (window.innerWidth / 375) * 16 + 'px';。这样可以实现等比例缩放。
为什么有些人推荐 62.5% 的技巧？
设置
html { font-size: 62.5%; } 使得 1rem = 10px（基于 16px 默认值）。这样 14px 就是 1.4rem，24px 就是
2.4rem，计算更直观。但要记得重置 body 字体大小为 1.6rem（16px）。
小数 REM 值（如 0.875rem）安全吗？
完全安全。现代浏览器支持高精度的 REM 值计算。但在某些旧版浏览器中可能存在 1px 的舍入误差。如果追求像素级精确，可以在关键位置使用 PX。