max-width不生效的主因是width属性抢占控制权；块级元素默认width: auto时max-width才主导尺寸，若设width: 100%或具体值，需确保其计算结果不大于max-width，否则width优先覆盖。
max-width不生效？先看width有没有在抢控制权
设了max-width: 600px但元素还是撑满屏幕，大概率是width属性在“越权”。width是硬性设定，max-width只是上限——只要width计算结果没超限，max-width就完全不介入。
- 块级元素默认
width: auto，此时max-width能主导尺寸；但一旦写了width: 100%或width: 800px，就得确认它是否真小于max-width值 - 调试时打开开发者工具，看
Computed面板里的width实际值：如果显示800px而max-width是600px，说明width赢了 - 安全写法：想弹性又防拉伸，用
width: 100%; max-width: 600px;；只想靠内容撑开又设上限，干脆只写max-width: 600px，别碰width
图片响应式必须配对写height: auto
max-width: 100%单独加在<img>上，根本不算完成响应式。它只是说“别宽过父容器”，但没告诉浏览器高度怎么变——原始高度会被锁死，导致变形、塌陷或溢出。
- 最小安全组合：
img { max-width: 100%; height: auto; } - 别用
height: 100%替代——父容器高度常为auto，结果就是图片高度变成0 - 如果图片在
display: flex容器里，还要加min-width: 0，否则min-width: auto会阻止它收缩 - 检查HTML里有没有内联
width或height属性，它们优先级高于CSS，会直接覆盖你的规则
Flex/Grid子项的max-width要配合弹性控制
在flex或grid布局里，max-width容易被默认行为绕过。父容器的flex-shrink: 1和子项的min-width: auto会优先压缩内容，而不是尊重max-width。
- Flex子项加
flex-shrink: 0或min-width: 0，才能让max-width起效 - Grid列别只写
1fr，改用minmax(0, 600px)或clamp(320px, 50%, 960px) - IE11不支持
clamp()和minmax()，还得靠媒体查询兜底 - 调试时临时加
border: 1px solid red，确认是元素真没缩，还是视觉上被父容器“撑”住了
媒体查询里的max-width和元素上的不是一回事
@media (max-width: 768px)里的768px指视口宽度，和div { max-width: 768px; }里的768px毫无关系。混用会导致断点错位或样式不触发。
立即学习“前端免费学习笔记（深入）”；
- 媒体查询只响应视口变化，不能监听某个
div变窄——真要监听元素尺寸，得用ResizeObserver - 断点数值别硬套设备参数，按内容可读性定：比如正文行宽超过
85ch就该收窄 - 慎用
max-width: 100vw，滚动条存在时vw会包含滚动条宽度，可能溢出视口 -
max-width: 100%是相对于包含块，不是视口；它防窄屏溢出，但不解决大屏过宽问题
max-width，而是搞清它在哪一层上下文里起作用——是元素自身、Flex/Grid分配逻辑，还是媒体查询的视口判断。漏掉任一环，都可能让样式看起来“失效”。 
