窄屏三栏挤成一团的本质是固定宽度或弹性比例未随视口调整，应通过媒体查询主动降级：≤480px单列、481–768px双列、≥769px恢复三栏，并用Grid或Flex实现平滑响应式重排，同时保障DOM顺序与可访问性。
窄屏下三栏布局挤成一团，本质是固定宽度或弹性比例没随视口调整。解决办法不是硬撑三栏，而是用媒体查询主动降级：小屏幕切单列，中等屏可选双列，保留核心信息流。
设置断点，按设备宽度分层响应
别凭感觉写 max-width: 768px，先看内容实际需要多少空间。标题、正文、侧边栏文字最小可读宽度约 280–320px，三栏总宽低于这个值就必然重叠。常用断点参考：
- ≤ 480px（老手机/竖屏）→ 强制单列，隐藏非关键侧栏或收进汉堡菜单
- 481px – 768px（平板竖屏/大手机横屏）→ 主内容 + 一栏侧边（如导航或摘要），另一栏折叠或合并
-
≥ 769px → 恢复三栏，用
display: grid或flex精确控制比例
用 CSS Grid 实现平滑降级（推荐）
Grid 天然支持响应式重排，比浮动或 inline-block 更可控。示例结构：
.layout {
display: grid;
grid-template-columns: 1fr 250px 250px; /* 默认三栏：主内容 + 两栏侧边 */
gap: 20px;
}
@media (max-width: 768px) {
.layout {
grid-template-columns: 1fr; / 全部堆成一列 /
}
}
@media (max-width: 480px) {
.layout {
gap: 12px;
}
/ 可额外隐藏次要侧栏，例如：.sidebar-2 { display: none; } /
}
Flex 布局兼容老浏览器的写法
如果需支持 IE10+，用 Flex 更稳妥。关键在子项不设固定 width，改用 flex 属性分配空间，并在媒体查询中重置：
立即学习“前端免费学习笔记（深入）”；
- 默认：
.main { flex: 2; }，.aside-left, .aside-right { flex: 1; } - ≤ 768px：
.aside-right { display: none; }，.main, .aside-left { flex: 1; }→ 变双列 - ≤ 480px：
.main, .aside-left, .aside-right { flex: none; width: 100%; }→ 单列
别忘了内容顺序与可访问性
视觉上重排不能破坏 DOM 顺序。主内容应始终在 HTML 中靠前，侧栏后置。否则屏幕阅读器会先读广告或链接，再读正文。用 order 调整视觉位置，而不是挪动 HTML：
.main { order: 1; }
.aside-left { order: 2; }
.aside-right { order: 3; }
@media (max-width: 768px) {
.aside-right { order: 1; } / 视觉上提到最前，但 DOM 不变 /
}
基本上就这些。核心不是“让三栏在窄屏也显示”，而是“让信息在窄屏更易获取”。媒体查询不是补丁，是布局逻辑的一部分。
