必须添加viewport元标签，否则@media无效；正确写法是<meta name="viewport" content="width=device-width, initial-scale=1.0">，且需置于<head>最前，禁用user-scalable或固定width值。
直接加 @media 不顶用，页面在手机上还是挤成一团——根本原因是没设 viewport 元标签，浏览器默认按 980px 宽度渲染，后续所有媒体查询都跑偏了。
必须加的 <meta name="viewport"> 标签
这是响应式改造的第一步，也是最容易漏掉的一步。没有它，@media 就像没装子弹的枪。
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">必须放在<head>里，且越靠前越好 - 如果项目已有
viewport但写了user-scalable=no或maximum-scale=1.0，会禁用双指缩放，影响可访问性，建议删掉 - 某些老模板里写的是
width=1200或固定像素值，这会让移动端强制拉伸，直接覆盖掉
@media 断点怎么选才不翻车
别抄网上“主流断点表”，先看自己页面内容在哪卡住。常见失效场景是：文字太小看不清、导航栏折叠后没触发、卡片堆叠错位。
- 优先用移动优先写法：基础样式写默认（小屏），再用
@media (min-width: 768px)加平板，@media (min-width: 1024px)加桌面 - 避免用
max-width套嵌多层，比如@media (max-width: 767px) { @media (max-width: 480px) { ... } }—— 浏览器不支持嵌套媒体查询 - 断点数值不是魔法数字：768px 对应 iPad 竖屏逻辑宽度，1024px 是多数笔记本最小宽度，比硬记数字更重要的是在 Chrome DevTools 里拖动设备模拟器，观察布局断裂点
Flexbox 替换浮动后，float 残留样式要清干净
很多老静态页用 float: left 实现两栏，改成 display: flex 后，如果没重置 float，元素可能仍按旧规则占位，导致空白或重叠。
立即学习“前端免费学习笔记（深入）”；
- 给父容器加
display: flex后，立刻检查子元素是否还带float、clear、position: absolute这类脱离文档流的声明 - 常见坑：
nav里li用了float，改用 Flex 后忘了删，结果菜单项横向溢出容器 - 用 Chrome 的 “Computed” 面板查
float是否为none，别只看 Styles 面板里有没有那行代码
图片和 iframe 不响应？max-width: 100% 得配 height: auto
只加 max-width: 100% 不够，如果图片原始高度固定，缩放后会变形或撑开容器。
- 对所有
<img>和<iframe>，统一加：img, iframe { max-width: 100%; height: auto; } - 如果用了
background-image，得配合background-size: contain或cover，不能只靠容器宽高百分比 - 嵌入 YouTube 视频时，
<iframe>默认有固定width和height属性，必须删掉，否则 CSS 的max-width不生效
真正卡住人的从来不是技术本身，而是改完 viewport 后没清浏览器缓存，或者在真机上测试时忘了关 Chrome 的“停用缓存”开关——这些细节比 Flex 写法更容易让整个响应式改造看起来“没效果”。
