容器宽度应避免固定px，优先使用max-width配合百分比；如max-width: 1200px + width: 100%或margin: 0 auto，确保大屏有上限、小屏自适应收窄，防止横向滚动。

容器宽度别用固定px，优先选max-width + %

直接写 width: 1200px 会让容器在小屏上横向滚动，这是响应式布局最常踩的坑。真正可用的容器宽度必须能随视口缩放，而不是卡死一个像素值。

推荐组合：max-width 控制上限，width: 100% 或 margin: 0 auto 让它在小屏下自动收窄：

• max-width: 1200px 是桌面宽屏常见上限，但不是必须——内容撑不开就别硬设
• 小屏（max-width: 100%，避免留白或溢出
• 慎用 width: 100% 套死父级：如果父级是 container-fluid，子容器再写 width: 100% 就等于没约束

Bootstrap 的 .container 断点是写死的，但可覆盖

Bootstrap 5 默认的 .container 在不同断点有预设 max-width：比如 sm 是 540px、md 是 720px、lg 是 960px。这些值来自其内部媒体查询，不是魔法，完全可以重写。

覆盖方式很简单，加一条更高优先级的 CSS 即可：

Html2md

使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

下载

立即学习“前端免费学习笔记（深入）”；

@media (min-width: 992px) {
  .container {
    max-width: 1100px;
  }
}

• 不要试图修改 Bootstrap 源码或 JS 配置——直接覆写 CSS 更可控
• 如果项目不用 Bootstrap，就完全没必要套它的断点逻辑；按自己内容“开始难看”的宽度设更准
• .container-fluid 始终是 width: 100%，但它不解决内容居中问题，记得配 margin: 0 auto 或内层再套一个带 max-width 的 div

字体和内边距也要响应式，不能只调容器宽度

只改容器宽度，但 padding: 20px、font-size: 16px 还是固定值，整体观感依然僵硬。响应式是整套尺寸系统的联动。

• 内边距建议用 rem 或视口单位：padding: 1rem 1.5rem，再配合根元素动态缩放
• 字体大小别锁死 px，可用 clamp(1rem, 2.5vw, 1.25rem) 实现平滑过渡
• 避免在媒体查询里逐个重写所有 padding/margin，优先用相对单位+根字号调整，减少重复代码

高度不能靠 height: xxxpx 硬撑，min-height 才是安全线

给容器设 height: 532px 看似简单，但在手机竖屏下会立刻暴露问题：要么图片被拉伸，要么底部大片空白，要么内容被截断。

• 一律改用 min-height，例如 min-height: 50vh 或 min-height: 400px
• 搭配图片时，确保 img 有 max-width: 100% 和 height: auto，否则 min-height 失效
• 如果容器内有绝对定位元素，注意 min-height 不会触发 BFC，必要时加 overflow: hidden 或伪元素清除浮动

实际项目里，最难拿捏的不是断点数字本身，而是「什么时候该让容器收缩、什么时候该保留最小视觉空间」——这得盯着真实内容在各种设备上跑一遍，而不是抄一套尺寸就完事。