Bootstrap移动优先指类名默认从xs断点生效，如.col-6全局有效，.col-md-6仅≥768px生效；须先写基础类（如.col-12），再叠加更大屏类，避免小屏塌陷。
移动优先不是口号，是类名生效逻辑
Bootstrap 的移动优先，本质是 CSS 类的默认行为从 xs（超小屏）开始定义，其他断点只负责“增强”，不覆盖基础。比如 .col-6 在所有尺寸下都占一半宽度；而 .col-md-6 仅在 ≥768px 时才生效，更小屏幕会回退到无该类时的状态（通常是 col-12 或流式堆叠）。
- 常见错误：写
.col-sm-6 .col-md-4 .col-lg-3却忘了最基础的.col-12，导致小屏下元素塌陷或溢出容器 - 正确做法：优先写最小屏类（如
.col-12），再按需叠加更大屏类（如.col-md-6、.col-xl-4） - 性能影响：没用的断点类不会触发重排，但冗余类会增加 HTML 体积和解析时间
视口 meta 标签失效？检查是否被重复注入
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 必须存在且唯一，否则移动端缩放、字体渲染、媒体查询都会失常——尤其在使用 Start Bootstrap 模板时，这个标签常藏在 _includes/head.html 里，但若你又在 index.html 顶部手动加了一次，浏览器可能只取第一个，也可能行为不可预测。
- 典型现象：iPhone 上页面显示为桌面版缩略图，或横向滚动条意外出现
- 排查方法：用 Chrome DevTools → Elements 面板搜索
viewport，确认只有一处且值正确 - Start Bootstrap 用户注意：修改前先查
_includes/head.html，别在主文件里重复写
媒体查询断点为何没起作用？看清楚是 min-width 还是 max-width
Bootstrap 5+ 全部使用 min-width 断点（如 @media (min-width: 992px)），意味着样式从该宽度“向上生效”。这和早期 Bootstrap 3/4 的部分混合写法或自定义 SCSS 中误用 max-width 容易冲突。
- 错误示例：自己写
@media (max-width: 767.98px) { .my-btn { display: none; } }，结果在 iPad 竖屏（768×1024）下按钮仍隐藏——因为 768px 已触发 Bootstrap 的md断点，你的max-width规则被跳过 - 推荐做法：统一跟随 Bootstrap 断点变量，用 SCSS mixin 如
@include media-breakpoint-up(md) - 兼容性提醒：IE11 不支持
min-width媒体查询嵌套写法，若需支持，得用展开式或降级处理
图片和字体在手机上模糊？弹性单位没配对
响应式不只是布局，还包括媒体资源适配。Bootstrap 的 .img-fluid 类依赖 max-width: 100% + height: auto，但如果父容器用了固定像素宽（如 width: 300px），图片仍会被拉伸失真；同理，rem 或 em 字体单位若没配合 html { font-size: ... } 的媒体查询调整，小屏下文字可能过小或撑破容器。
- 实操建议：给图片外层加
.w-100或确保父容器用col-*类（自带 flex 和 max-width 控制） - 字体方案：至少加一条
@media (max-width: 575.98px) { html { font-size: 14px; } }，避免 iOS Safari 默认缩放干预 - 容易被忽略：
<picture>+srcset虽好，但若未配sizes属性，浏览器无法正确选图，高清屏仍加载低分辨率资源
实际项目里，最常卡住人的不是“怎么写响应式”，而是“为什么写了却没反应”——多数时候是视口标签、断点方向、类名层级这三处悄悄错了。
