max-width 不生效主因是被 width 覆盖；替换元素天然支持，flex 子项需设 min-width: 0 或 flex-shrink: 0；max-width: none 取消限制，100% 是相对父容器动态上限；媒体查询中的 max-width 指视口宽度，非元素宽度。
max-width 设置后元素不收缩？检查是否被 width 覆盖
很多情况下设了 max-width: 600px，但元素在小屏幕上还是撑满容器，根本原因往往是同时写了 width: 100% 或具体像素值——width 会强制覆盖 max-width 的约束逻辑。
实操建议：
- 优先用
width: auto（默认值），让max-width生效； - 若必须用百分比宽度，改用
width: 100%+max-width: 600px是可行的，但得确保父容器有明确宽度或已脱离文档流影响； - 用浏览器开发者工具检查 computed 样式，确认
width实际解析值是否大于max-width。
img 和 flex 项目里 max-width 表现不同？看 display 类型和布局上下文
max-width 对替换元素（如 <img>）天然友好，但对 display: flex 子项，默认行为可能绕过它——尤其当父容器设了 flex-shrink: 1 且子项没设 min-width: 0 时，子项会优先压缩内容而非遵守 max-width。
实操建议：
-
<img>直接加max-width: 100%+height: auto就能响应式缩放； - Flex 子项加
flex-shrink: 0或min-width: 0，才能让max-width正常起作用； - Grid 项目同理，需注意
min-width默认是auto，可能撑开格子。
max-width: none 和 max-width: 100% 有什么区别？别混用
max-width: none 是显式取消上限，等价于没设；而 max-width: 100% 是动态上限——它基于包含块宽度计算，不是“不限制”，而是“最多占满父容器”。两者语义完全不同，误用会导致响应式断裂。
实操建议：
- 想彻底放开限制，用
max-width: none； - 想随父容器缩放，用
max-width: 100%； - 慎用
max-width: 100vw，在有滚动条的页面里可能溢出视口（vw包含滚动条宽度）； - 移动端适配更稳的是
max-width: 100%+box-sizing: border-box。
媒体查询里写 max-width 断点，注意单位和触发时机
写 @media (max-width: 768px) 时，这个 768px 指的是视口宽度（viewport width），不是元素宽度。很多人误以为它能监听某个 div 变窄，其实不能——CSS 媒体查询只响应视口或设备特性变化。
实操建议：
- 断点数值建议用常见设备宽度，但别硬套；实际按内容撑开需求定，比如文字行宽超过 85ch 就该收窄；
- 避免嵌套多层
@media (max-width: ...)，容易叠加冲突； - 需要监听元素宽度变化？得用 JavaScript 的
ResizeObserver，CSS 本身做不到。
真正难的不是写 max-width，而是判断它在哪一层生效、被谁覆盖、有没有被布局模式悄悄绕过。多看 computed 样式，少猜。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
