width: 100% 与 max-width 配合使用需确保父容器有明确宽度约束，且必须设置 viewport meta 标签，否则在移动端将失效；IE11 中需避免 table-cell 等特殊元素并降级处理。
max-width 怎么和 width 百分比一起用才不塌陷
直接给 width: 100% 又加 max-width: 1200px，看起来没问题，但实际在小屏上可能留白、大屏上又没撑满——关键在于父容器是否设置了宽度约束。如果父元素是 body 或默认块级元素，它本身宽度随视口变化，width: 100% 就是“占满父容器”，而 max-width 是上限，两者配合才能真正实现“弹性但有边界”。
常见错误现象：max-width 写了但没生效，或者内容在手机上缩成窄条、桌面端却卡在 800px 不扩展。
-
width: 100%必须作用在有明确父容器的元素上（比如div包裹内容），不能只靠 body 直接撑开 - 避免对
html或body设置max-width，它们默认宽度是视口宽度，设了反而限制子元素伸展 - 如果父容器用了
display: flex或float，子元素的width: 100%可能失效，优先改用flex: 1或清除浮动 - 移动端 Safari 对
max-width在input或textarea上有渲染延迟，可加min-width: 0强制重算
为什么 viewport meta 标签是前提，不是可选项
没有 <meta name="viewport" content="width=device-width, initial-scale=1">，CSS 的 max-width 和百分比就失去参照系。iOS Safari 默认按 980px 渲染页面，哪怕你写了 max-width: 400px，它也先按 980px 布局再缩放，导致样式错位、点击区域偏移。
使用场景：所有响应式页面，尤其含表单、卡片流、图文混排的布局。
立即学习“前端免费学习笔记（深入）”；
- 漏写该标签时，手机上看到的其实是“缩小版桌面页”，
width: 100%算的是 980px 的 100%，不是屏幕宽度 -
initial-scale=1必须显式声明，某些安卓浏览器会忽略默认值 - 不要加
user-scalable=no，影响可访问性，且现代 WCAG 要求允许缩放
百分比 + max-width 在 flex / grid 容器里怎么不打架
Flex 项目默认不响应 width 和 max-width，除非显式设置 flex-shrink: 1 或用 flex-basis 替代 width。Grid 项同理，max-width 只在轨道尺寸固定时起作用，否则会被网格算法覆盖。
性能影响：过度嵌套百分比计算（比如三层嵌套 width: 80%）会导致浏览器反复回流，尤其在 resize 时卡顿。
- Flex 项目要控制宽度，优先用
flex: 0 1 300px（即flex-grow: 0; flex-shrink: 1; flex-basis: 300px），再配合max-width - Grid 中想让某列弹性，用
grid-template-columns: 1fr minmax(300px, 600px) 1fr，而不是给子元素设width - 避免在动画元素上同时用
width: 100%和transform: scale()，会触发 layout + paint 双重开销
IE11 下 max-width 百分比失效的典型表现和绕过方式
IE11 对 max-width 在 table、inline-block 或未设置 display: block 的元素上支持极差，常表现为始终按 max-width 值渲染，无视百分比。
兼容性影响：如果你的项目还需支持 IE11，不能只依赖 CSS 方案，得加一层降级逻辑。
- 对
table-cell元素，改用display: block+width: 100%+max-width组合 - IE11 不识别
minmax()，grid 布局中需提供@supports not (display: grid)回退 - 必要时用 JS 检测
document.documentElement.clientWidth动态加 class，比如is-small-screen，再写独立规则
最易被忽略的一点：当父容器有 padding 或 border，而子元素用 width: 100% 时，实际宽度 = 父内容区宽 + padding + border，max-width 限制的是这个总和。这时候要么加 box-sizing: border-box，要么把 max-width 值调小一点。
