标准答案
- 断点的核心目标是保证内容在不同宽度下仍然可读、可操作、布局稳定。
- 设备宽度可以提供初始参考，例如手机、平板、桌面，但不能覆盖所有窗口和折叠屏场景。
- 更可靠的做法是观察布局在什么宽度开始拥挤、换行、溢出或操作困难。
- 页面级布局可以用全局断点，组件级布局可以用 Container Query 按容器宽度响应。
- 断点数量要克制，过多断点会增加测试和维护成本。
题目解析
这题要从内容优先回答。用户不是拿某个固定设备看页面，而是在各种窗口和容器中使用内容。
组件被放进侧栏、弹窗或不同栅格时，容器宽度往往比视口宽度更有意义。
代码示例
断点可以从布局失效点抽象成少量规则。
CSS
.layout {
display: grid;
grid-template-columns: 1fr;
}
@media (min-width: 760px) {
.layout {
grid-template-columns: minmax(0, 1fr) 280px;
}
}常见误区
- 只按 iPhone、iPad、PC 三个设备写断点。
- 断点太多，每个范围都单独微调，后续很难维护。
- 组件放到窄容器后失效，却仍然只依赖视口媒体查询。