为什么 1rem = 16px？能改吗？（以及如何优雅地调整它！）

为什么 1rem = 16px？能改吗？（以及如何优雅地调整它！）

如果你写 CSS 久了，你肯定遇到过 rem 这个单位，但有没有想过，为啥 1rem 就等于 16px？ 这个数是怎么来的？能改吗？能改的话，怎么改得优雅又丝滑？

今天我们就来聊聊 rem，顺便教你如何“篡改”它的默认值，让你的布局更加顺手！

📌 1rem = 16px，真相竟然是……

rem 其实是 root em 的缩写，表示的是**根元素（html 标签）**的 font-size。

而大部分浏览器的默认 html font-size 是 16px，所以：

1rem = 16px

这就是 1rem = 16px 的原因，完全是浏览器的锅！

但是！既然它的本质是 html 的 font-size，那我们就可以 修改 html 的 font-size 来改变 1rem 的大小！😏

✂️ 我能改 1rem 的大小吗？（当然能！）

👉 方法 1：直接改 html 的 font-size

html {
  font-size: 20px; /* 现在 1rem = 20px */
}

• 这样 1rem = 20px
• 0.5rem = 10px
• 2rem = 40px

你可以随心所欲地改大小，但 直接改 html 会影响整个页面，需要慎重。

👉 方法 2：Tailwind CSS 里改 rem

如果你用 Tailwind CSS，可以修改 html 的 font-size：

html {
  font-size: 18px; /* 现在 1rem = 18px */
}

如果你不想 Tailwind 乱改你的 font-size，可以在 tailwind.config.js 里加：

module.exports = {
  corePlugins: {
    preflight: false, // 关闭 Tailwind 默认的 CSS reset
  }
}

👉 方法 3：局部修改某个 div

如果你不想影响整个网站，可以只改某个部分：

.special-div {
  font-size: 12px; /* 这个 div 里的 1rem = 12px */
}

Tailwind 也可以：

<div class="text-[12px]">
  <p class="text-[1rem]">这个 1rem 其实是 12px</p>
</div>

这样，你就能在不同部分用不同的 rem，不会影响全局。

🎯 高手必备：用 62.5% 让 1rem = 10px

前端高手喜欢把 html 的 font-size 设成 62.5%，你知道为什么吗？

html {
  font-size: 62.5%; /* 62.5% × 16px = 10px */
}

这样 1rem = 10px，计算起来超级方便！

• 0.8rem = 8px
• 1.2rem = 12px
• 2rem = 20px
• 4rem = 40px

是不是比 1rem = 16px 直观多了？不用再脑子里默算 16px * 1.5 这种难搞的数学题了！🙌

所以，很多设计师和前端团队都喜欢这个设定！ 你也可以试试，看你的团队习不习惯～

💡 总结

✅ 1rem = 16px 是因为 html 的默认 font-size 是 16px
✅ 改 html 的 font-size 可以改变 1rem 的值
✅ 局部改 font-size 也能影响 rem 的计算
✅ 62.5% 让 1rem = 10px，计算起来更直观

🚀 你会怎么改 rem？

你是喜欢默认的 1rem = 16px，还是觉得 62.5% 更爽？或者你有自己的独门秘籍？欢迎留言讨论！🔥🔥🔥