根本原因是width: 100%或100vw在大视口下无约束，应使用max-width: 1280px～1440px设物理边界，配合margin: 0 auto居中、min-width: 0防Flex撑开，并避免纯vw单位。
超宽屏（如 3440×1440、5120×1440）下内容被拉散、文字行过长、卡片间距失控——根本原因不是“没做响应式”，而是默认的 width: 100% 或 100vw 在大视口下完全放任自流。解决它，靠的不是加更多断点，而是给内容区域设一道“物理边界”。
用 max-width 而不是 width 控制主容器
直接写 width: 1280px 会让小屏横向滚动；写 width: 100% 又会让 4K 屏上单行文字超 200 字符，眼动追踪效率断崖下降。正确做法是让容器“弹性伸缩，但有底线”：
-
max-width值建议取1280px～1440px：覆盖主流设计稿宽度，也符合可读性研究中 75–100 字符/行的黄金区间 - 必须配
margin: 0 auto，否则超宽屏下内容左对齐，右边大片空白 - 别用
max-width: 100%——它只在父容器比自身窄时生效，对超宽屏完全无效 - 内边距用
rem或em，避免大屏下padding: 20px变成视觉压迫
Flex/Grid 子项撑爆 max-width 怎么办
Flex 容器默认会优先保持子项尺寸，哪怕这导致整行突破 max-width。常见于含长 URL、未约束图片或 flex: 1 的卡片：
- 给直接子项加
min-width: 0：强制 Flex 放弃“宁可撑开也不收缩”的默认策略 - 对图片、
iframe、table等天然不收缩的元素，显式加max-width: 100%和height: auto - 若用
flex-wrap: wrap，记得给子项设flex-basis（如flex: 0 1 300px），否则换行点不可控
要不要加媒体查询？先看是否真需要
纯 max-width 能解决 90% 的空旷问题。只有当产品明确要求“2560px+ 显示双栏”“3200px+ 加侧边工具区”时，才叠加断点：
立即学习“前端免费学习笔记（深入）”；
- 推荐写法：先设基础
max-width: 1280px，再用@media (min-width: 1920px)往上调，而不是从零写断点 - 慎用
vw单位（如max-width: 80vw）：4K 屏上 80vw ≈ 3072px，依然过宽；且页面缩放时行为不稳定 - 想更弹性？可用
max-width: min(1440px, 90vw)或clamp(768px, 90vw, 1440px)，但注意 Firefox 旧版对clamp()支持不稳
真正容易被忽略的是：测试时别只拉满浏览器窗口——连真机 4K 显示器，系统缩放设为 125%，100vw 值会变，而 max-width 值不变。所以边界值必须用固定像素或 min() 这类计算函数锚定，不能依赖纯相对单位。
