别用100vw做最大宽度依据，它在鱼屏上不等于物理宽度；主容器必须用max-width+margin:0 auto，再配合子项收缩控制和背景视觉延伸。
直接结论：别用 100vw 做最大宽度依据，它在鱼屏上不等于物理宽度；主容器必须用 max-width + margin: 0 auto，再配合子项收缩控制和背景视觉延伸。
为什么 max-width: 100vw 在鱼屏上会失效
鱼屏（如 3440×1440、3840×1600）下，window.innerWidth 常比设备真实宽度小 50–200px，原因是浏览器对高 DPI、系统缩放、地址栏高度的计算逻辑偏差。结果就是 100vw 实际撑不满屏幕，右侧留白，或背景图被裁切。
- 不要测完差值就写
max-width: 102vw——缩放变时偏差不固定，下次就过头 - 避免对
body或html直接设max-width，会破坏滚动、打印、固定定位等基础行为 - 真正该加
max-width的是语义化 wrapper 容器，比如.container或.main-wrapper
主容器怎么写才安全又居中
这是最常漏掉的一环：只写 max-width 不生效，是因为它只限制“上限”，不负责位置。
- 必须搭配
margin: 0 auto，且目标元素得是常规块级流（不能是display: inline-block或 Flex 子项） - 推荐值：正文类用
max-width: 72ch（字符单位更可靠），通用容器用max-width: 1280px～1440px - 别写
max-width: 100%——它只在父容器窄于自身时起作用，对鱼屏完全无效 - 如果项目用 Tailwind，对应写
max-w-screen-xl，但要查清框架版本里这个 token 的实际像素值（不同版本可能差 200px）
Flex/Grid 子项撑破 max-width 怎么办
Flex 容器默认让子项“宁可撑开也不换行”，尤其遇到长 URL、未折行英文、图片或 iframe 时，max-width 形同虚设。
- 给直接子项加
min-width: 0和overflow-wrap: break-word - 图片、
<pre class="brush:php;toolbar:false;"></pre>、表格等替换元素，必须显式写max-width: 100%+height: auto - Grid 布局中，把
grid-template-columns: 1fr 1fr改成grid-template-columns: repeat(2, minmax(0, 1fr))，允许列收缩 - 避免子项设
flex-shrink: 0或过大min-width，否则换行逻辑直接被锁死
背景色/边框没撑满全屏？这不是 max-width 的错
容器收窄后，body 背景色、页脚阴影、左右渐变边框仍按视口渲染，导致左右露白——这是视觉断层，不是布局失败。
- 背景延伸：给
body设背景色，容器保持background: transparent；若需容器专属背景，用::before+position: fixed模拟全宽覆盖 - 边框/分割线：别给容器加
border，改用box-shadow: inset或绝对定位横线 - 检查是否误加了
overflow-x: hidden在html或body上——它会截断fixed元素，让伪元素失效
鱼屏适配真正的难点不在“怎么写”，而在“谁来承担宽度责任”：容器管内容宽度，body 管背景与视口关系，JS 只在必要时兜底（比如动态注入 --full-width 变量）。漏掉任一环，都会在 3440px 宽度下突然崩出白边或滚动条。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
