必须加viewport meta标签，否则流式布局失效：不写，移动端仍按980px渲染，文字过小、点击不准，非css问题而是浏览器未启用响应式前提。
viewport meta 标签必须加，否则流式失效
不写 <meta name="viewport" content="width=device-width, initial-scale=1.0">，哪怕你所有宽度都用百分比，移动端照样会按 980px 默认视口渲染，内容被压缩成小字、按钮点不准——这不是 CSS 问题，是浏览器根本没给你“流式”的前提。
常见错误：只在 PC 端测试，或用 Chrome 模拟器但没开“Device Toolbar”，误以为布局正常；实际真机访问就错位。
- 必须放在
最前面，且不能重复写（重复会导致部分安卓 WebView 忽略） -
initial-scale=1.0不能省，尤其 iOS Safari 对缩放敏感 - 不要加
user-scalable=no，它会禁用双指缩放，违反 WCAG 可访问性要求
宽度用 % 还是 fr？关键看容器是否 flex
百分比（%）和 fr 都能实现流式，但行为完全不同，混用容易出 bug。
比如父容器是普通块级元素：.container { width: 100%; }，子元素写 width: 50% 才生效；但如果父容器是 display: flex，再写 width: 50% 就可能被 flex 主轴拉伸覆盖，此时该用 flex: 1 或 flex: 0 0 50%。
- 传统流式布局（非 flex）：优先用
%，配合max-width/min-width控制极限尺寸 - Flex 布局内：用
flex相关属性，fr只在grid中有效，别在 flex 里写width: 1fr（无效） - 避免同时设
width: 50%和flex: 1，后者会强行重算尺寸，前者被忽略
float 布局做左右自适应时 overflow: hidden 不可少
经典左定宽右自适应结构中，.right 不加 overflow: hidden 或 display: flow-root，就会发生文字绕行、高度塌陷——这不是 bug，是 float 的原始机制。
示例结构：
.left { width: 200px; float: left; }
.right { /* 没加 overflow */ }
结果：.right 内容会从 .left 下方开始排布，而不是紧贴右侧。
- 推荐用
overflow: hidden（兼容 IE8+），简单直接 - 现代写法可用
display: flow-root，语义更清晰，但 IE 不支持 - 别依赖
clear: both清浮动来解决这个问题，它只影响后续元素，不修复当前块的包裹问题
流式布局的致命短板：高度无法自适应
流式布局本质是“宽度响应、高度固定”，所以当你把 height 也设成 %，却忘了祖先元素没设高度，结果就是 height: 100% 计算为 0 —— 这不是你写错了，是 CSS 规范本身限制。
典型场景：全屏三栏流式布局，希望每栏高度撑满视口，但只写 height: 100% 没用。
- 必须逐层确保父级有明确高度（如
html, body { height: 100%; }） - 更可靠的做法是用
height: 100vh，但注意vh在 iOS Safari 横屏时会误算（取的是屏幕高度而非可视区高度） - 如果内容高度动态变化，流式布局天然不适合做等高列，该换 Flex 或 Grid
流式布局真正管用的地方，是文本段落、卡片列表、表单字段这类“宽度要随屏缩放，但高度由内容决定”的场景；一旦涉及精确高度控制或复杂对齐，就得切换技术栈。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
