媒体查询必须写在CSS中并用@media规则包裹，且需配合HTML的viewport meta标签才能生效；常见错误包括未设viewport、误用min-device-width、断点单位不当或CSS优先级覆盖等。
媒体查询怎么写才能生效
媒体查询必须写在 CSS 里，用 @media 规则包裹，不能只靠 HTML 的 viewport meta 标签就起作用。常见错误是把断点值写死成像素却没设 viewport，导致移动端根本不会触发查询。
正确做法是先在 HTML 中加这行：
<meta name="viewport" content="width=device-width, initial-scale=1">
然后在 CSS 中写：
@media (max-width: 768px) {
.header { font-size: 16px; }
}
-
max-width表示“设备视口宽度 ≤ 768px 时应用”，注意是视口（viewport）宽度，不是屏幕物理分辨率 - 断点数值建议用常见设备视口范围，比如
480px（老手机）、768px（平板竖屏）、1024px（平板横屏） - 不要用
min-device-width，它检测的是设备屏幕本身，现代浏览器基本不响应
移动端优先还是桌面端优先
推荐移动端优先：先写默认样式（小屏），再用 @media (min-width: ...) 逐步增强。这样既减少重复覆盖，也符合渐进增强逻辑。
立即学习“前端免费学习笔记（深入）”；
比如：
.card { width: 100%; padding: 12px; }
@media (min-width: 768px) {
.card { width: 50%; padding: 16px; }
}
@media (min-width: 1024px) {
.card { width: 33.33%; padding: 20px; }
}
- 默认样式适配最窄视口，后续只加“需要时才变”的规则
- 避免用
max-width层层嵌套，容易漏掉中间断点或产生冲突 - 如果项目已有大量桌面样式，可反向用
@media (max-width: ...)覆盖，但维护成本更高
为什么写了媒体查询却没反应
最常踩的坑不是语法错，而是单位、优先级和加载时机问题。
- 断点用了
em或rem却没考虑根字体大小变化——一律用px最稳妥（如(max-width: 768px)） - CSS 文件被
media属性提前过滤了，比如<link rel="stylesheet" media="print" href="style.css">，会导致媒体查询失效 - 样式被更具体的 CSS 选择器覆盖，比如
.container .card比@media ... .card优先级高，得加权或重构选择器 - 开发时在桌面浏览器缩放窗口测试，但某些浏览器（如 Safari）对缩放下的媒体查询响应有延迟，刷新或切到响应式调试模式更准
要不要用 JavaScript 监听窗口变化
绝大多数布局调整完全不需要 JS。CSS 媒体查询是声明式、高性能、自动响应的。只有当你要做以下事情时才考虑 JS 配合：
- 根据视口宽高比（
aspect-ratio）动态加载不同图片 - 在
resize事件中更新某个非 CSS 可控的状态（比如 Canvas 尺寸、Swiper 实例重置） - 需要兼容 IE9 及更早版本（它们不支持
@media查询，但这类需求现在极少见）
即使要用 JS，也别直接监听 resize——频繁触发太伤性能，至少节流到 100ms 以上，或者用 matchMedia() API 更轻量：
const mql = window.matchMedia('(min-width: 768px)');
mql.addEventListener('change', e => {
if (e.matches) console.log('进入平板及以上尺寸');
});
真要调样式，优先改 class，别 inline style；真要动内联样式，也别反复 setStyle，缓存元素引用。
