媒体查询必须写在标签内或外部css文件中，不能直接放在html的或里；正确位置是内的或通过引入的css文件，错误位置包括任意处、块或html注释中。
媒体查询必须写在 <style></style> 里或外部 CSS 文件中
直接往 index.html 的 或 里写 @media 规则，浏览器会忽略——它只认 CSS 上下文。最稳妥的做法是把媒体查询放进 <style></style> 块，或者用 <link rel="stylesheet"> 引入外部 CSS。
常见错误：有人把 @media (max-width: 768px) { ... } 直接塞进 ，结果样式完全不生效，因为 HTML 解析器根本不处理这个语法。
- ✅ 正确位置：
内的<style></style>标签中 - ✅ 也可放在单独的
style.css中，再通过<link href="style.css" rel="stylesheet">加载 - ❌ 错误位置：
任意位置、<script></script>块内、HTML 注释里
@media 查询条件写法要匹配真实设备行为
别只盯着像素值硬套。比如写 @media (max-width: 768px)，实际在 iPad 竖屏（逻辑像素 768×1024）可能触发，但 Chrome 模拟器缩放到 768px 宽度时又不一定等价——因为视口缩放、DPR、<meta name="viewport"> 设置都会影响最终计算值。
- 务必加
<meta name="viewport" content="width=device-width, initial-scale=1">，否则移动端媒体查询大概率失效 - 优先用
min-width/max-width而非min-device-width，后者已基本弃用且行为不可靠 - 需要适配横竖屏切换？用
@media (orientation: landscape)或组合写法：@media (max-width: 768px) and (orientation: portrait)
内联 <style></style> 中媒体查询的典型结构
下面这段可以直接复制进 index.html 的 里跑起来：
<style>
body {
font-size: 16px;
margin: 0;
}
@media (max-width: 768px) {
body {
font-size: 14px;
padding: 10px;
}
}
@media (max-width: 480px) {
body {
font-size: 12px;
padding: 5px;
}
}
</style>
注意：媒体查询块内部不能嵌套其他 @ 规则（比如不能在 @media 里再写 @supports），也不能写 HTML 标签或 JS 逻辑。
- 每个
@media块必须有花括号包裹 CSS 声明 - 多个断点之间没有执行顺序依赖，CSS 层叠规则照常生效
- 如果用 CSS 变量，可以在媒体查询里重定义，例如：
:root { --gap: 20px; } @media (max-width: 768px) { :root { --gap: 10px; } }
调试时别只信浏览器宽度数字
Chrome 开发者工具的响应式模式显示 “768px”，不代表媒体查询就一定命中。真机上可能因系统字体放大、辅助功能设置、iframe 嵌套等原因导致视口宽度计算偏移。
- 用
window.matchMedia()在控制台手动验证：window.matchMedia("(max-width: 768px)").matches - 在媒体查询块里临时加个显眼样式（比如
body { outline: 2px solid red; }）来肉眼确认是否触发 - 避免用
device-pixel-ratio做主要断点依据，高 DPR 设备（如 iPhone）容易误判
真正难的不是写对语法，而是让同一套 @media 在 iOS Safari、Android Chrome、桌面缩放后都表现一致——这得靠反复实机测试，而不是只盯着模拟器数字。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
