Bootstrap 5：媒体查询调字体大小的方式是否合理？有无替代方案

修改:root的font-size来调整rem基准的方式是可行的，但要注意Bootstrap 5的所有组件（按钮、导航、卡片等）都是基于:root默认font-size（16px）设计的，修改这个值会全局改变所有使用rem单位的元素尺寸，可能导致组件布局偏离预期。如果你的需求只是调整段落字体，这种“一刀切”的方式不是最优解。

1. 仅针对段落写响应式样式（不影响全局） #

直接给<p>标签添加媒体查询，只修改段落的字体大小，避免干扰Bootstrap组件：

body {
    font-family: 'Work Sans', serif;
    font-weight: 300;
}

/* 默认小屏幕样式 */
p {
    font-size: 0.825rem; /* 对应13.2px，基于默认16px基准 */
    line-height: 1.2rem;
}

@media (min-width: 576px) {
    p {
        font-size: 0.9rem; /* 14.4px */
        line-height: 1.3rem;
    }
}

@media (min-width: 768px) {
    p {
        font-size: 1.1rem; /* 17.6px */
        line-height: 1.5rem;
    }
}

2. 使用Bootstrap 5自带的响应式文本类 #

Bootstrap 5提供了预定义的响应式字体大小类，无需自定义CSS，直接在HTML中添加即可：

<p class="fs-sm-6 fs-md-5">这里是你的段落内容</p>

• .fs-sm-6：在sm断点（≥576px）及以上使用第6号字体大小
• .fs-md-5：在md断点（≥768px）及以上使用第5号字体大小
  你可以根据需求搭配.fs-xs-*、.fs-lg-*等类，完全贴合Bootstrap的设计规范。

3. 基于Sass自定义（适合使用Bootstrap Sass版本的项目） #

如果你的项目用的是Bootstrap的Sass源码，可以通过修改变量来实现更灵活的控制，比如在导入Bootstrap前定义段落的响应式变量：

// 自定义段落在不同断点的字体大小
$p-font-size-xs: 0.825rem;
$p-line-height-xs: 1.2;
$p-font-size-sm: 0.9rem;
$p-line-height-sm: 1.3;
$p-font-size-md: 1.1rem;
$p-line-height-md: 1.5;

// 导入Bootstrap核心样式
@import "../node_modules/bootstrap/scss/bootstrap";

// 编写响应式样式
p {
    font-size: $p-font-size-xs;
    line-height: $p-line-height-xs;
}

@media (min-width: 576px) {
    p {
        font-size: $p-font-size-sm;
        line-height: $p-line-height-sm;
    }
}

@media (min-width: 768px) {
    p {
        font-size: $p-font-size-md;
        line-height: $p-line-height-md;
    }
}

这种方式既能保持代码的可维护性，又能避免全局修改带来的副作用。

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