如何在Bootstrap 5.2中设置font-size:62.5%且不影响组件尺寸

方法1：修改Bootstrap Sass变量（推荐） #

既然你已经在用自定义的Bootstrap Sass文件，直接在引入Bootstrap核心代码前，重置它的根字体大小变量，强制Bootstrap使用16px作为基准，不受你设置的根元素font-size影响：

// custom.sass
// 在引入Bootstrap前覆盖变量
$font-size-root: 16px;
// 引入Bootstrap核心
@import "bootstrap/scss/bootstrap";

这样Bootstrap的所有组件、尺寸类都会基于16px计算，和官方默认一致；而你自己的样式里，根元素font-size: 62.5%（10px基准）依然生效，写1.6rem就能得到16px，完全不冲突。

方法2：用Sass函数做REM转换（不修改根字体） #

如果不想改动根元素的默认font-size，可以写个Sass函数帮你快速把px转成基于10px基准的REM，本质是做数值换算：

// shared.sass
@function rem($px) {
  // 基于默认根字体16px，把输入的px转成10px基准的REM
  @return ($px / 10) * 0.625rem;
}

// 用法示例：要设置20px的字体，直接写
.your-class {
  font-size: rem(20); // 实际输出1.25rem，对应20px（16px*1.25=20px）
}

这种方式不用改根字体，Bootstrap完全不受影响，你自己写样式时用这个函数就能按10px基准快速计算，不用手动换算。

方法3：隔离自定义样式的作用域 #

把自己的内容放在一个独立的容器里，只给这个容器设置10px基准的REM规则，Bootstrap的内容不放在这个容器里：

<!-- HTML结构 -->
<body>
  <!-- Bootstrap组件放在这里，不受自定义样式影响 -->
  <div class="bootstrap-section">
    <button class="btn btn-primary">Bootstrap按钮</button>
  </div>

  <!-- 自己的内容放在这个容器里，用10px基准REM -->
  <div class="custom-content">
    <p class="your-text">自定义文本</p>
  </div>
</body>

// shared.sass
.custom-content {
  font-size: 62.5%; // 容器内1rem=10px
  & * {
    font-size: 1.6rem; // 子元素默认16px
  }
}

这种方式适合项目结构划分清晰的场景，避免全局样式冲突，但需要额外维护容器结构。

内容的提问来源于stack exchange，提问作者Keelan McCarthy