断点不是按设备型号抄表，而是跟着内容拐点走

刚开始做响应式时，很多人会先去搜“iPhone 多宽、iPad 多宽、常见安卓机多宽”，然后把这些数字直接写进媒体查询。这样当然能快速起步，但做几个页面之后就会发现，只按设备型号设断点，维护起来很容易僵。

页面真正出问题的时刻，往往和某个设备名无关

一个双栏布局可能在 900 像素还看着正常，到 820 像素时侧栏突然挤压正文；一组卡片可能在 640 像素时刚好两列舒适，再往下就开始拥挤。这些“开始不好看”的节点，往往才是更值得设断点的地方。

换句话说，断点最应该响应的是内容失衡，而不是产品宣传页上的设备参数表。

断点少一点，规则反而更清楚

早期做响应式很容易陷入另一个误区：为了兼容尽可能多的设备，写出一长串断点。结果就是样式层层覆盖，后面谁也不敢动。其实只要布局思路稳，很多页面用两到三个关键断点就够了。

我更喜欢先问自己几个问题：

• 什么时候横排内容已经放不下
• 什么时候辅助信息应该退到下一层
• 什么时候导航需要换形态

这些问题的答案，比设备清单更能帮助你写出长期可维护的媒体查询。

测试时别只盯浏览器缩放

浏览器窗口拖窄当然方便，但它只能告诉你布局有没有断，不一定能说明真实手感。手机上的字体渲染、触控区域、滚动节奏，和桌面浏览器模拟出来的感受还是有差别。所以我会把桌面调试当成第一轮，再拿真机快速看一遍重点页面。

小结

响应式里的断点如果只是照着设备尺寸往里填，页面迟早会被越来越多的特殊规则拖住。更靠谱的思路，是观察内容在哪些宽度开始失衡，然后让媒体查询围绕这些拐点服务。这样写出来的布局，面对新设备时也更从容。