viewport meta标签必须写对，否则流式布局在移动端失效；需正确书写并置于head顶部，配合百分比、min/max-width及flex/grid实现真正响应式布局。
viewport meta 标签必须写对
没它，所有流式布局都会在移动端失效——文字缩成针尖、页面横向滚动、点击区域错位，根源几乎全是这行漏了或拼错了：<meta name="viewport" content="width=device-width, initial-scale=1">。
常见错误包括：width=deviceWidth（少个短横）、device_width（下划线错）、maximum-scale=1（禁用缩放，违反可访问性）；还有一类隐形坑：该标签没放在 最顶部，导致 iOS Safari 先按桌面宽度渲染再重排，出现闪屏。
用百分比 + min/max-width 控制容器宽度
单纯写 width: 100% 容易在大屏上撑满整个视口，文字过宽难阅读；全靠 px 又失去流式意义。真正可控的做法是组合使用：
-
width: 80%：主体内容占视口八成，留白呼吸 -
max-width: 1200px：大屏下也不超过阅读舒适宽度 -
min-width: 320px：防止小屏挤压变形（尤其老安卓）
注意：min-width 和 max-width 必须配合 width: 100% 或百分比才生效，单独设无效。
子元素避免固定 px 宽度破坏流式链
父容器用了百分比，子元素却写 width: 300px，等于在流式管道里塞进一根刚性钢筋——它不会随父级缩放，会导致溢出、换行错乱或横向滚动条。
可行替代方案有：
- 改用
width: 30%或flex: 1（配合display: flex） - 图片统一加
max-width: 100%; height: auto - 表单控件用
width: 100%并设box-sizing: border-box
特别提醒：padding 和 margin 也别写死 px，可用 rem 或响应式单位（如 vw）微调。
Flex/Grid 是流式布局的现代主力，但别滥用 column-count
column-count 和 column-width 看似轻量，实际只适合纯文本流分栏（比如新闻正文），它不能控制子项顺序、无法对齐卡片、不支持 hover 动画，且在 Safari 旧版中 break-inside: avoid 兼容性差。
真要做多列自适应卡片布局，优先选：
-
display: grid配grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) -
display: flex配flex-wrap: wrap和flex-basis: 280px
这两者能真正响应容器宽度变化，支持对齐、间距、顺序控制，且现代浏览器支持率已超 98%。
流式布局真正的难点不在写法，而在“边界感”——什么时候该让元素收缩，什么时候该截断换行，什么时候该隐藏次要信息。这些决策没法靠一套 CSS 规则自动完成，得结合内容语义和用户动线来定。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
