bootstrap 5 默认用rem单位是为了统一响应式缩放与无障碍访问，而非追求“更先进”；其所有间距、字体、圆角均基于html font-size等比缩放，而border、box-shadow等需物理像素精度处仍坚持使用px。
Bootstrap 5 默认用 rem 不是因为它“更先进”，而是因为它的设计目标明确：统一响应式缩放 + 用户可访问性保障。你如果直接写 px，就等于主动放弃浏览器缩放、系统字体放大、高 DPI 屏幕适配这三道防线。
为什么 Bootstrap 5 的 spacing 和 font-size 全部基于 rem？
它不是为了“看起来更现代”，而是让所有间距（margin、padding）、字体（font-size）、圆角（border-radius）共享同一个缩放源头——html 的 font-size。一旦这个值变，整个 UI 节奏同步变化。
- 默认根字号是
16px，所以1rem = 16px；但你改html { font-size: 20px }，所有1rem立刻变成20px，包括.p-3（对应1rem）、.fs-4（对应1.5rem） - 用户在 Windows 设置里把“显示缩放”调到 125%，或 macOS 开启“更大文字”，浏览器会自动增大根字号 → Bootstrap 的所有 rem 值随之等比放大，不会出现文字撑出按钮、行高错位等问题
- 媒体查询里只需改一次
html字号，就能批量调整整套间距系统，不用给每个.mt-2、.p-4单独加断点
哪些地方 Bootstrap 5 仍坚持用 px？
它没一刀切换 rem —— 凡是依赖物理像素精度的属性，依然用 px，且写死在源码里。
-
border: 1px solid：高 DPI 下必须保持 1 物理像素宽度，用0.0625rem既难读又易因 sub-pixel 渲染模糊 -
box-shadow: 0 1px 2px：模糊半径依赖设备像素采样，rem 缩放会让阴影虚化程度失真 -
line-height: 1.5（无单位）：这是比例值，不参与缩放，避免文字行距随根字号异常拉伸 - 图标尺寸（如
.navbar-brand内的 SVG width/height）：多数用px或em控制，确保对齐和清晰度
如果你强行把 Bootstrap 5 全部改成 px，会发生什么？
不是“不能用”，而是你会立刻暴露在三类真实问题中：
- 用户按
Ctrl + +放大网页时，文字变大，但按钮内边距、卡片圆角、栅格间距全卡在原尺寸 → 界面视觉割裂，文字溢出容器 - 设计稿标的是 375px 宽，你用
px写死.container { max-width: 1140px }，结果在 iPad 上显得窄，在折叠屏上撑不满 - 想适配深色模式下放大字体？得手动重写全部
font-size、margin、padding类，而 rem 只需改一个:root变量或 JS 动态设html.style.fontSize
混用 rem 和 px 最容易踩的坑
这不是单位之争，是缩放逻辑冲突。比如你写：padding: 1rem; border: 1px; font-size: 1.2rem;，三者缩放行为完全不同：
-
1rem随根字号线性放大 -
1px永远不变（除非浏览器强制缩放渲染层） -
1.2rem也线性放大，但和1rem的缩放起点未必一致（如果用了不同基准） - 结果就是：根字号一调，按钮上下 padding 看起来“突然变薄”，边框相对文字变粗，调试时根本看不出哪条规则在捣鬼
真正麻烦的从来不是选 rem 还是 px，而是没想清楚哪些该统一流动、哪些必须钉死像素 —— Bootstrap 5 的方案，就是把流动部分交给 rem，钉死部分留给 px，中间靠无单位 line-height 和 scale() 补位。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
