max-width 是响应式设计中防止元素过度拉伸的基础手段，支持 px、%、ch 等单位；常与 width、margin 搭配实现居中定宽，适用于图片自适应（max-width:100%;height:auto），但需慎用于 Flex/Grid 项以免干扰弹性布局。
用 max-width 可以防止元素在宽屏下被过度拉伸，保持布局的可读性和美观性，是响应式设计中的基础手段。
max-width 的基本写法
直接在 CSS 中为元素设置 max-width 属性，单位可以是像素（px）、百分比（%）、em、rem 等：
-
max-width: 800px;—— 宽度最多到 800 像素，超出视口也不再变宽 -
max-width: 90%;—— 最宽为父容器宽度的 90%，适合弹性布局 -
max-width: 60ch;—— 按字符宽度限制（如适合正文阅读的行长度）
配合 width 和 margin 实现居中定宽
单独设 max-width 不会自动居中，通常和 width、margin 搭配使用：
- 给块级元素设
max-width: 1200px; width: 100%; margin: 0 auto; - 这样在小屏时占满宽度，大屏时最多显示 1200px 并水平居中
- 比固定
width: 1200px;更灵活，避免小屏出现横向滚动条
图片和响应式内容的 max-width 处理
图片、视频等替换元素常需防止溢出容器：
立即学习“前端免费学习笔记（深入）”；
-
img { max-width: 100%; height: auto; }是响应式图片标配 - 这样图片不会宽于其父容器，同时保持原始宽高比
- 配合
object-fit可进一步控制裁剪或缩放方式
慎用 max-width 覆盖 flex 或 grid 项
在 Flex 或 Grid 布局中，max-width 可能和容器的分配逻辑冲突：
- 例如
flex: 1;的子项设了max-width: 300px;，可能提前“卡住”不再伸展 - 必要时可改用
flex-basis或min/max-width组合控制弹性范围 - 调试时可用浏览器开发者工具检查 computed width，确认是否被截断
