@media 能用但需配合正确的 viewport 标签，否则手机端不触发；断点应依内容临界宽度设定，推荐移动优先的 min-width 写法，配合 flex/grid 布局与重置式样式设计。
直接说结论：@media 能用，但必须配合正确的 <meta name="viewport">，否则在手机上根本不会触发——这是 90% 的初学者卡住的第一步。
viewport 标签写错，@media 就是摆设
媒体查询不是“写了就生效”。iOS 和 Android 浏览器默认以桌面视口（通常约 980px 宽）渲染页面，@media (max-width: 768px) 在这种情况下永远不匹配。
- 必须在
中加这一行：</meta name="viewport" content="width=device-width, initial-scale=1.0"> - 禁止写
width=1200、user-scalable=no或maximum-scale=1.0——后者会让用户无法双击放大，违反可访问性要求 - 调试时先打开浏览器开发者工具的设备模拟器，再检查
document.documentElement.clientWidth是否接近你手机的真实宽度（比如 iPhone 14 是 390px），不是 980px 才算生效
断点别抄“常见尺寸”，按内容撑开的位置定
写 @media (max-width: 768px) 并不等于“适配平板”；它只表示“当视口宽度 ≤ 768px 时执行”。真实断点应由内容决定：
- 拖动浏览器窗口，观察导航栏文字是否换行、卡片是否被挤压、图片是否溢出容器——那个临界宽度就是你的断点
- 推荐用
min-width写法，符合移动优先逻辑：@media (min-width: 768px) { /* 平板及以上 */ } - 3–4 个断点够用：
480px（小屏）、768px（中屏）、1024px（桌面窄）、1200px（宽屏）；再多反而难维护
样式重置比叠加更可靠
很多人习惯在媒体查询里“补一条规则”，比如只改 font-size，但忘了其他属性仍沿用桌面样式，结果字体变小了，按钮却还是 200px 宽，布局崩掉。
立即学习“前端免费学习笔记（深入）”；
- 优先用重置式写法：在基础 CSS 里写移动端默认样式，再用
@media (min-width: 768px)覆盖桌面端需要的调整 - 避免在多个媒体查询里反复设置同一属性（如多次改
padding），容易覆盖错或漏掉 - 用
display: none隐藏小屏不需要的元素时，记得在对应断点里把它设回block或flex，否则桌面端也看不见
flexbox 和 grid 是媒体查询的搭档，float 不是
@media 只负责“什么时候改”，改什么、怎么改，得靠现代布局方式支撑。用 float 做响应式，几乎注定要写一堆 clear、overflow: hidden 和 hack。
- 横向导航栏？用
nav ul { display: flex; }，小屏时直接@media (max-width: 640px) { nav ul { flex-direction: column; } } - 卡片网格？用
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr))，不用媒体查询也能自适应列数 - IE11 兼容要注意：
flex: 1得拆成flex-grow: 1; flex-shrink: 1; flex-basis: 0;，否则不生效
最常被忽略的一点：媒体查询本身不解决图片溢出、字体僵硬、容器死宽这些问题。它只是开关，真正让页面“响应”的，是里面写的那些 max-width: 100%、rem 字体、% 宽度和 flex 布局——开关开了，里面没装灯泡，还是黑的。
