如何用Bootstrap实现单个h1标签在移动端与桌面端的差异化样式？

你的现有CSS是完全有效的，但既然在用Bootstrap，确实有更简洁的方式来实现这个需求，不用写那么多自定义媒体查询。下面分两种场景给你最优方案：

场景1：仅需给单个h1设置样式（最简方案） #

直接用Bootstrap的响应式工具类，不用写任何自定义CSS：

<h1 class="text-warning fs-custom-32 sm:text-danger sm:fs-custom-60">Hello I am an h1 tag</h1>

补充说明： #

• Bootstrap默认的文本颜色类里，text-warning是黄色系（如果需要你代码里的特定黄色，可以自定义一个text-yellow工具类），text-danger是红色系，完美对应你的颜色需求。
• 关于字体大小：Bootstrap默认的fs-*类（比如fs-1到fs-6）是预设尺寸，如果需要精确的32px和60px，你可以自定义两个响应式字体大小工具类，更贴合Bootstrap规范的写法是用它的断点混合宏：

.fs-custom-32 { font-size: 32px; }

@include media-breakpoint-up(sm) {
  .sm\:fs-custom-60 { font-size: 60px; }
}

这样你的工具类会和Bootstrap的断点系统保持一致，不用硬写像素值。

场景2：需要复用这个样式（多个h1使用） #

如果多个h1都要这个样式，建议自定义一个类，结合Bootstrap的混合宏来写CSS，比你原来的代码更简洁且规范：

.custom-h1 {
  color: yellow;
  font-size: 32px;

  @include media-breakpoint-up(sm) {
    color: red;
    font-size: 60px;
  }
}

然后HTML里直接用：

<h1 class="custom-h1">Hello I am an h1 tag</h1>

为什么这个更好？ #

• 不用手动写@media (min-width: 576px)，用Bootstrap的media-breakpoint-up(sm)混合宏，自动对应框架的断点值，后续Bootstrap更新断点时你的代码无需修改。
• 代码结构更紧凑，符合Bootstrap的开发规范。

对你现有代码的评价 #

你的原始CSS完全能实现需求，但用Bootstrap的内置能力可以减少自定义代码量，让样式更贴合框架生态，维护起来更方便。

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