流式排版核心是用相对单位（如%、rem）配合max-width/min-width约束实现内容随视口自然伸缩，需全局启用box-sizing: border-box，图片/iframe设max-width: 100%，字体用rem+媒体查询动态调整。
流式排版不是靠 flex 或 grid 把容器切开，而是让内容本身随视口宽度自然伸缩 —— 核心是用相对单位控制尺寸，同时守住最小/最大边界。
用百分比 + max-width/min-width 控制容器宽度
纯百分比容易在小屏上挤成一条线，大屏上无限撑开；必须加约束。常见错误是只写 width: 100%，结果整个页面贴边、文字过宽难阅读。
-
width: 80%是起点，但得配max-width: 960px防大屏失控 -
min-width: 320px能挡住极端窄屏（比如竖屏 iPhone SE），避免内容被压扁 - 父容器设了
max-width后，子元素用%才真正“流”得稳 —— 否则会按 viewport 算，脱离上下文 - 所有涉及宽度的盒子（
.header、.main、.sidebar）都该走同一套规则，别有的用px有的用%
box-sizing: border-box 必须全局启用
否则 padding 和 border 会额外加到 width 上，导致 100% 宽度的盒子实际溢出。面试常考：为什么写了 width: 100% 还横向滚动？大概率就是漏了这句。
- 在 CSS 开头统一写：
* { box-sizing: border-box; } - 不要只给某个 class 加，否则兄弟元素计算逻辑不一致，响应时错位
- 注意：IE8+ 支持，无需前缀；但老项目若还兼容 IE7，得单独给关键容器加
图片和 iframe 必须设 max-width: 100%
它们默认是固有尺寸，不会随容器缩放，一拉小屏就直接破框。常见现象：文章里一张大图把右侧导航顶飞，或地图容器被撑爆。
- 写死
img, iframe { max-width: 100%; height: auto; }就够用 - 别用
width: 100%—— 那会让小图也被强行拉伸变形 - 如果图需要居中，补一句
display: block; margin: 0 auto;，避免底部多出空白 - SVG 图标同理，加
max-width比设width更安全
字体大小用 rem + 媒体查询微调
只用 em 或 px 不算真流式；rem 配合根字体动态调整，才能让文字密度始终合理。
- 先在
:root设基础值：font-size: 16px;，再用媒体查询阶梯调整 - 例如：
@media (max-width: 768px) { :root { font-size: 14px; } } - 正文用
font-size: 1rem，标题用1.5rem等，所有尺寸都跟着根字号联动 - 避免在子元素里又用
em嵌套缩放，容易失控；rem 是唯一锚点
真正难的不是写出来，而是当设计稿给的是 px 值、UI 说“这个按钮就要 120px 宽”时，你能不能当场换算成 max-width 下的相对比例，并守住可读性底线 —— 流式排版的边界感，永远比代码多一层判断。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
