响应式断点怎么选

先看内容在哪折行

把浏览器从宽拉到窄，记下正文、导航、卡片第一次挤在一起的宽度。那个宽度才是断点，而不是 375 或 768 这些常见数字。

少设几档

大多数阅读页两档就够：

• 窄屏：单列，导航收起
• 宽屏：正文限宽，侧边目录出现

第三档只在确实有不同布局时再加，例如卡片从两列变三列。

用 min-width 往上加

.layout {
  display: block;
}

@media (min-width: 960px) {
  .layout {
    display: grid;
    grid-template-columns: 16rem 1fr;
  }
}

先写移动端样式，再用 min-width 逐步增强宽屏。这样即使媒体查询不生效，页面也还是一列可读的正文。