用 max-width 限制容器最大宽度是最直接有效的解法：.container { max-width: 1440px; margin: 0 auto; width: 100%; box-sizing: border-box; }，并配合媒体查询分档控制，避免 100vw 或 flex 拉伸导致溢出。
大屏下页面拉伸严重，核心原因是元素宽度随屏幕无限制扩展。用 max-width 限制容器最大宽度是最直接有效的解法。
给主体容器设置 max-width
不要让 .container、.wrapper 或 body 直接 width: 100% 且无上限。在主流布局中，给最外层内容容器加一个合理最大宽度，并配合居中：
- .container { max-width: 1440px; margin: 0 auto; width: 100%; }
- 这样在 1440px 以上屏幕中，容器不再继续变宽，内容保持舒适阅读宽度
- width: 100% 确保小屏下仍能铺满，max-width 只在大屏起作用
搭配 box-sizing: border-box 避免宽度溢出
如果容器内有 padding 或 border，不设 box-sizing 容易导致实际宽度超 max-width：
- * { box-sizing: border-box; }（全局推荐）
- 或单独写：.container { box-sizing: border-box; padding: 0 20px; }
- 确保 padding 不额外增加总宽度，max-width 真正生效
响应式断点中精细控制
仅靠一个 max-width 不够灵活，可结合媒体查询分档处理：
立即学习“前端免费学习笔记（深入）”；
- @media (min-width: 1920px) { .container { max-width: 1600px; } }
- @media (min-width: 1440px) and (max-width: 1919px) { .container { max-width: 1440px; } }
- 不同分辨率区间启用不同最大宽度，兼顾高分屏显示效果与内容可读性
慎用 width: 100vw 和 flex/auto 拉伸行为
某些组件（如 banner、header）若用了 width: 100vw 或父容器设了 flex: 1，也会强行撑满全屏：
- 检查是否误用了 100vw（它包含滚动条宽度，且不受 max-width 约束）
- 对需要限制宽度的模块，改用 width: 100%; max-width: 1440px;
- Flex 子项加 flex-shrink: 0 或 min-width: 0 防止异常拉伸
