流式自适应需三步：百分比宽度、max-width设弹性上限、媒体查询响应断点；仅width:100%会导致溢出或挤压，必须搭配max-width（如72ch或680px）和min-width（≥320px），并用媒体查询在768px和480px处调整布局与间距。
直接用百分比 + max-width + 媒体查询，三步就能跑通流式自适应，不用框架、不依赖 JS。
为什么不能只写 width: 100%
单独设 width: 100% 很容易让元素撑满整个视口，但内容过宽时会溢出、文字挤成一团，尤其在小屏上体验极差。真正可用的流式布局必须有「弹性上限」和「最小容错」。
-
width: 100%只是起点，不是终点 - 必须搭配
max-width控制最大宽度（比如max-width: 1200px），否则大屏下内容拉得太开 - 还要加
margin: 0 auto居中，不然元素贴左难看 - 没有
min-width的话，超窄屏（比如翻转手机）可能把按钮压成一条线
max-width 和 min-width 怎么选值
数值不是拍脑袋定的，得看内容承载力和阅读舒适度：
- 正文区推荐
max-width: 72ch（字符数单位），比固定像素更语义化；或max-width: 680px—— 这是多数阅读场景下的黄金宽度 -
min-width: 320px是底线，再小就该切单列了（靠媒体查询） - 导航栏、卡片容器等组件级元素，建议用
max-width: 100%+padding代替固定width，留白比硬塞更重要
移动端必须加的媒体查询断点
别信“一套断点打天下”，实际项目里最稳妥的是两个断点起步：
立即学习“前端免费学习笔记（深入）”；
- 当
max-width: 768px时，把两栏布局切为单列（flex-direction: column或display: block） - 当
max-width: 480px时，进一步收紧内边距（padding: 0.5rem）、缩小字体（font-size: 0.875rem） - 注意：断点按视口宽度设，不是按设备名（比如别写
@media (device-width: 375px)），否则 iPad 横屏就失效
流式布局真正的难点不在写法，而在克制——你得忍住不给关键容器设固定 width，哪怕设计稿标了 1200px。一旦加了 px 宽度，它就不再是流式的了。
