媒体查询必须配合正确的viewport标签才能生效，正确写法是，断点应由内容实际错乱位置决定，优先使用min-width和相对单位，布局推荐flex或grid。
媒体查询不是“加了就自动适配”，它必须和 <meta name="viewport"> 配合才能生效；没写对这行标签，所有 @media 规则基本等于白写。
viewport 标签写错，媒体查询直接失效
浏览器在移动端默认会把页面渲染成 980px 宽的虚拟视口，再整体缩放显示。如果 <meta name="viewport"> 缺失或写成 width=1200、user-scalable=no、maximum-scale=1.0，那 @media (max-width: 768px) 就永远收不到真实设备宽度——它看到的一直是那个被缩放前的“假宽度”。
正确且最低限度的写法只有一行：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
- 删掉所有
minimum-scale、maximum-scale、user-scalable——它们破坏可访问性，iOS Safari 双击放大也会失效 - 不要用固定值如
width=375或width=1200，device-width才是动态取设备物理视口宽度 - 这个标签必须放在
最前面，不能被 JS 动态插入
断点别硬背 768px，按内容撑开临界点设
所谓“768px 是平板断点”只是参考值。真实项目里，断点应该由布局开始错乱的那一刻决定：某张图被裁切、三列卡片挤成两行、导航栏文字换行、标题文字过小看不清……那个宽度才是你的断点。
推荐用 min-width 写法，符合移动优先逻辑：
@media (min-width: 768px) { /* 平板及以上才加载这些样式 */ }
- 避免混用
min-width和max-width，容易互相覆盖，调试时难定位 - 3–4 个断点足够：480px（小屏手机）、768px（中大屏手机/竖屏平板）、1024px（横屏平板/窄桌面）、1200px（宽桌面）
- 断点值建议用
em单位（如45em），而非像素——这样能响应用户系统字体缩放设置
容器和字体必须用相对单位，否则媒体查询白搭
写了 @media (min-width: 1024px) { .header { width: 1200px; } }，但 .header 本身是 width: 1200px 固定值？那在小屏下它照样溢出，媒体查询只改了“更大屏时”的宽度，没解决小屏下的根本问题。
- 容器宽度优先用
max-width: 1200px; margin: 0 auto;，而不是width: 1200px - 字体统一用
rem，通过修改html { font-size: 16px; }控制全局缩放，再配合媒体查询动态调：@media (max-width: 480px) { html { font-size: 14px; } } - 图片必须加
max-width: 100%; height: auto;，否则固定width: 300px的图在小屏必然横向滚动
flex 和 grid 是布局主力，float 已淘汰
还在用 float: left 做多列？遇到媒体查询切换时极易崩：浮动未清除、父容器高度塌陷、换行逻辑混乱。现代响应式布局应直接上 display: flex 或 display: grid。
- 横向导航、卡片流、表单字段，用
flex-wrap: wrap+flex-basis控制换行与占比 - 图文混排、仪表盘类复杂结构，用
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))实现列数自适应 - 注意 IE11 兼容：不支持
flex: 1简写，得拆成flex-grow: 1; flex-shrink: 1; flex-basis: 0;
最常被忽略的其实是“内容驱动断点”——盯着设计稿设 768px 很快，但真正上线后，用户用的不是设计稿，是各种尺寸的真实屏幕和真实内容。多在 Chrome DevTools 里拖动窗口宽度，看哪一刻文字开始挤、哪张图开始裁、哪块留白突然变大，那个宽度才是你该写的断点。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
