三个断点就够了

按内容设断点，不按设备

常见错误是照着设备清单写断点：320 / 375 / 414 / 768 / 1024 / 1440……结果是十几个媒体查询，每个只调 2px。

正确做法是把窗口拖窄，看布局在哪一刻开始难看，那个宽度就是断点。

实用的三档

/* 移动优先：默认单栏 */
.shell { display: grid; grid-template-columns: 1fr; }

@media (min-width: 680px) {   /* 平板：两栏 */
  .shell { grid-template-columns: 200px minmax(0, 1fr); }
}

@media (min-width: 1180px) {  /* 桌面：三栏 */
  .shell { grid-template-columns: 200px minmax(0, 1fr) 260px; }
}

三档对应三种"信息量能放多少"，而不是三种设备。

能自动就不要写断点

网格用 auto-fit + minmax，卡片会自己决定一行放几个：

.grid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

比手写三套 grid-template-columns 稳得多，也不用担心介于断点之间的宽度。

塌陷时要想清楚"谁是次要的"

三栏变单栏不是简单堆叠，而是要做取舍：

最后一条经常做错 —— 侧栏直接掉到正文下面，用户要先划过一整块无关内容。

两个容易漏的验证点

• 125% / 150% 系统缩放：Windows 上很常见，等效于把视口变窄，很多布局在这里才暴露问题
• 触摸目标 44px：手机上链接和按钮的可点区域小于这个值会很难点中，尤其在导航里