bootstrap不提供响应式font-weight或opacity类，fw-和opacity-均为静态类；需用媒体查询或sass扩展实现断点适配，且优先使用rgba()控制背景透明度而非全局opacity。
Bootstrap 本身不提供「响应式 font-weight」或「响应式透明度」的开箱即用类，fw-bold、opacity-75 这些类对所有断点一视同仁；想让字体粗细或透明度随屏幕变化，必须手写媒体查询或扩展 Sass —— 否则只会得到静态效果。
fw-* 类加了但不同屏幕没变化，为什么
因为 fw-light、fw-bold 等类没有断点后缀变体（如 fw-md-bold），Bootstrap 的响应式工具类体系里明确排除了 font-weight。你写 fw-sm-bold fw-lg-normal，最终只生效最后一个（!important 覆盖导致层叠失效），不会按断点切换。
- 验证方式：DevTools → Elements → Computed → 查看
font-weight是否真在不同宽度下变化 - 真正生效的是 CSS 层叠顺序，不是“条件触发”，所以靠多个
fw-类组合无效 - 如果用了可变字体（如 Inter），
font-weight: 100–900数值可平滑过渡，但普通字体只支持离散档位（400/600/700）
用媒体查询实现响应式 font-weight
这是最直接、兼容性最好、无需编译的方式，尤其适合 CDN 引入用户。
- 推荐用 Bootstrap 官方断点值（避免硬编码）：
@media (min-width: 768px)对应md，@media (min-width: 992px)对应lg - 统一用数字值（
400、600、700），避免bold/normal在自定义字体中映射不一致 - 示例（小屏常规，中屏中等，大屏加粗）：
.responsive-fw {
font-weight: 400;
}
@media (min-width: 768px) {
.responsive-fw {
font-weight: 500;
}
}
@media (min-width: 992px) {
.responsive-fw {
font-weight: 700;
}
}
然后在 HTML 中：<p class="responsive-fw">这段文字会随屏幕变粗</p>
opacity-* 类不能响应式，但可以用类似思路控制透明度
opacity-25 到 opacity-100 全是静态类，没有 opacity-sm-50 这种写法。直接改 opacity 值会影响整个元素（含文字、图标、子节点），而多数场景只要背景透明——此时应优先用 rgba() 或 hsla() 控制背景色透明度，而非全局 opacity。
- 错误做法：
<div class="opacity-50">...</div>→ 文字也变淡，可读性下降 - 正确方向：给容器设
background-color: rgba(255,255,255,0.8)，内容保持 100% 不透明 - 响应式透明度示例（背景从半透到全白）：
.responsive-bg {
background-color: rgba(255, 255, 255, 0.6);
}
@media (min-width: 768px) {
.responsive-bg {
background-color: rgba(255, 255, 255, 0.85);
}
}
@media (min-width: 1200px) {
.responsive-bg {
background-color: #fff;
}
}
容易被忽略的细节
字体粗细和透明度响应式改造看似简单，但实际落地时有三个隐形坑：
- Google Fonts 必须显式声明多字重，比如
Inter:wght@400;500;700&display=swap，否则font-weight: 500会退化为浏览器模拟加粗（发虚、毛边） - 导航栏内
.dropdown-menu不继承父级背景透明度，需单独处理background-color、border和box-shadow - 不要在媒体查询里混用
opacity和rgba()，前者影响整棵树，后者只控背景层；二者行为不可互换
