viewport meta标签必须严格写为<meta name="viewport" content="width=device-width, initial-scale=1">，且置于<head>最顶部；流式布局需容器、子项、内容三层弹性；Flex/Grid需合理设置wrap、basis或auto-fill/minmax；断点应基于内容密度而非设备型号。
viewport meta 标签写错等于没做响应式
几乎所有移动端显示异常——文字极小、横向滚动条、按钮点不中——都源于 <meta name="viewport" content="width=device-width, initial-scale=1"> 这行缺失或拼写错误。
常见错误包括：width=deviceWidth（少个短横）、device_width（下划线）、漏掉 initial-scale=1，或者把它放在 <link> 或 <script> 之后。浏览器会先渲染再修正，造成闪动或错位。
-
width=device-width必须一字不差，大小写和连字符都不能错 - 该标签必须位于
<head>最顶部，早于所有 CSS 和 JS 引入 - 若需禁用缩放（如金融类页面），可加
user-scalable=no，但别写成user-scalable=0—— 只认字符串yes/no
流式布局不是简单把 px 换成 %
把 width: 1000px 改成 width: 100% 只是第一步。真正在多设备上“流动”起来，得靠三层约束：容器弹性 + 子项弹性 + 内容弹性。
典型反例：.item { width: 50%; height: 200px; } 在小屏上高度固定，内容溢出或留白严重；更糟的是父容器没设 max-width，大屏上拉得太宽，阅读体验崩坏。
立即学习“前端免费学习笔记（深入）”；
- 容器优先用
max-width: 1200px+margin: 0 auto控制最大宽度，避免无限撑开 - 子项用
flex: 1 1 minmax(280px, 1fr))或width: calc(50% - 10px)配合gap，比纯百分比更可控 - 图片必须加
max-width: 100%和height: auto，否则会撑破容器
Flexbox 和 Grid 不是万能，但不用它们会更麻烦
纯媒体查询 + 百分比在三栏变两栏再变一栏时，要写大量重复规则；而 Flexbox / Grid 能让布局逻辑内聚，减少断点数量。但直接套用默认值容易翻车。
比如 display: flex 后没设 flex-wrap: wrap，小屏上子项强行挤在同一行，溢出不可见；又比如 Grid 的 grid-template-columns: repeat(3, 1fr) 在窄屏下仍强行分三列，文字被压扁。
- Flex 容器必设
flex-wrap: wrap，子项设flex-basis（如flex: 0 0 300px）而非只靠flex: 1 - Grid 推荐用
repeat(auto-fill, minmax(300px, 1fr))，让列数随视口自动增减 - 不要在同一个容器里混用
float和flex，旧样式会干扰新布局计算
断点不能按“iPhone / iPad”硬编码
写 @media (max-width: 768px) 是为了适配“宽度 ≤768px 的视口”，不是为了 iPad。很多团队按设备型号设断点，结果遇到折叠屏、Chromebook 或高DPI安卓机时，断点完全失效。
真正该关注的是内容是否可读、操作是否方便。比如导航菜单在文字换行前就该折叠，而不是等屏幕宽度降到 480px 才切汉堡菜单。
- 断点数值从设计稿内容密度反推：标题行高+边距+最小安全字宽 ≈ 触发重排的临界值
- 优先用
min-width而非max-width，避免层叠覆盖问题 - 避免嵌套过深的媒体查询，同一元素不同断点样式尽量合并到一个规则块里
流式布局的复杂点不在代码量，而在“弹性边界”的判断——元素缩到多小还能保持可用？文字小到多少必须换行？这些没有标准答案，只能靠真机测 + 用户反馈反复调。别迷信某个“完美断点”，它只对当前这一版内容成立。
