最常用且安全的组合是width: 100% + max-width: 1200px，它使小屏占满、大屏不撑开，但需确保viewport meta标签已声明、父容器未被锁死宽度、html/body未设max-width、flex子项加flex: 1或flex-basis: 100%，图片配max-width: 100%和height: auto，并配合margin: 0 auto居中。
width: 100% + max-width: 1200px 是最常用且安全的组合
这个写法能同时满足小屏占满、大屏不撑开两个核心需求，但前提是父容器没被意外锁死宽度。很多“max-width 不生效”的问题，其实是因为父级是 body 或未设宽的 div，而 body 默认宽度是视口，width: 100% 就等于视口宽，max-width 自然没机会触发。
必须确保：
-
viewportmeta 标签已声明：<meta name="viewport" content="width=device-width, initial-scale=1">，否则 iOS Safari 会按 980px 渲染，max-width: 1200px就失去意义 - 不要给
html或body设置max-width，它们本该撑满视口，加了反而卡住子元素 - 若父容器用了
display: flex，子元素的width: 100%可能被忽略，改用flex: 1或显式设flex-basis: 100%
图片和替换元素必须用 max-width: 100%; height: auto
这是防止图片溢出容器的铁律，不是可选项。只写 width: 100% 会导致高度塌陷或比例失真；只写 max-width: 100% 而不配 height: auto，图片可能被压缩变形。
常见错误场景：
立即学习“前端免费学习笔记（深入）”；
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 在
figure或picture内部直接对img设width: 100%，但父容器有padding或border，又没设box-sizing: border-box，实际宽度超限 - 在 Flex 容器中对
img设max-width: 100%，但没加min-width: 0，Safari 会因 flex 项默认最小宽度逻辑导致渲染异常 - 用
object-fit: cover时忘了配height，结果图片只显示左上角一小块
Flex/Grid 里 max-width 很容易被忽略或失效
Flex 项目默认忽略 width 和 max-width，除非你主动干预。Grid 项同理——轨道尺寸由网格算法决定，max-width 只在轨道固定时起作用。
正确做法：
- Flex 子项想限制最大宽度：加
flex-shrink: 1（允许收缩），再设max-width: 400px；或者用flex: 0 1 400px显式定义收缩行为 - Grid 子项想响应式：优先用
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))，而不是靠单个子项的max-width - 调试时看浏览器开发者工具的
Computed面板，确认最终 width 是不是被flex-basis或网格轨道覆盖了
别把 max-width 当成万能缩放开关
max-width 本身不触发缩放，它只是“上限守门员”。真正决定当前宽度的是 width 值，而 width 的计算又极度依赖父容器上下文。很多人以为写了 max-width: 600px，元素就会在 600px 宽度下居中，结果发现它贴左、留白巨大——其实是忘了加 margin: 0 auto。
容易被忽略的细节：
-
max-width: 100%没啥实际意义，它等价于没设，因为所有块级元素默认就不会超过父容器宽度 - 在 IE11 中，
max-width在table-cell或某些表单控件上表现异常，得用媒体查询兜底 -
clamp()虽好，但如果你还要兼容旧环境，就别用width: clamp(300px, 90%, 500px)替代传统组合
