@media不能直接写在HTML标签里，必须置于<style>标签内或通过<link>引入外部CSS文件，且需配合viewport meta标签才能生效。
媒体查询不能直接写在 HTML 标签里
浏览器解析 HTML 时，@media 规则只在 CSS 上下文中有效。把 @media (max-width: 768px) { ... } 直接塞进 <body> 或 <head> 的空白处（没包在 <style> 里），它会被完全忽略——连报错都不会有，只是静默失效。
常见错误包括：
- 在
<script>块里拼字符串写@media - 把
@media当成 HTML 属性塞进<div media="..."> - 放在
<!-- 注释 -->里以为能“隐藏生效”
✅ 正确做法只有两种：放进 <style> 标签内，或通过 <link rel="stylesheet"> 引入外部 CSS 文件。
用 <style> 写媒体查询最简单可靠
适合小项目、原型或快速验证，把 @media 块和基础样式一起写进 <head> 的 <style> 中，无需额外 HTTP 请求，加载即生效。
立即学习“前端免费学习笔记（深入）”；
注意点：
-
@media必须用花括号包裹完整 CSS 声明，不能只写选择器不写属性 - 多个断点之间按 CSS 层叠规则执行，后写的同级规则会覆盖前面的（除非加
!important） - 别在
@media块里嵌套@supports或其他@规则——语法非法 - 如果用了 CSS 变量，可以在不同媒体查询里重定义
:root，例如：@media (max-width: 768px) { :root { --gap: 10px; } }
示例可直接复制进 index.html 的 <head>：
<style>
body { margin: 0; font-size: 16px; }
@media (max-width: 768px) {
body { font-size: 14px; padding: 10px; }
}
@media (max-width: 480px) {
body { font-size: 12px; padding: 5px; }
}
</style><link> 引入带媒体查询的 CSS 文件更利于维护
当样式逻辑变多、团队协作或需要缓存控制时，拆到外部文件更清晰。关键不是“能不能”，而是 media 属性写在哪——它必须出现在 <link> 标签上，而不是 CSS 文件内容里。
两种主流方式：
-
<link rel="stylesheet" href="mobile.css" media="screen and (max-width: 768px)">：只在匹配条件时下载并应用该文件 -
<link rel="stylesheet" href="main.css">，然后在main.css里写@media (max-width: 768px) { ... }：文件始终加载，但规则只在匹配时生效
性能提示：第一种方式能减少非必要资源下载，但要注意——现代浏览器对小 CSS 文件的预加载很激进，实际收益可能不如想象中大；第二种更利于复用和调试。
viewport meta 标签缺失会导致媒体查询彻底失灵
哪怕 @media 写得再准，没有这行代码，移动端几乎必挂：
<meta name="viewport" content="width=device-width, initial-scale=1">
原因很简单：iOS/Android 默认把页面渲染成 980px 宽的桌面视口，再缩放显示。此时 max-width: 768px 实际检测的是那个虚拟的 980px 宽度，永远不触发。
容易被忽略的细节：
-
width=device-width是核心，不是可选项 -
initial-scale=1防止 Safari 自动缩放，否则媒体查询计算值会漂移 - 不要加
user-scalable=no——它违反 WCAG 可访问性要求，且部分安卓浏览器会因此禁用双指缩放 -
min-device-width已基本弃用，它检测物理设备宽度，不随横竖屏或缩放变化，行为不可靠
真正在意兼容性的项目，现在几乎没人再为 IE8– 加 html5shiv 和 respond.js，因为它们对现代 CSS 特性支持极差，反而引入更多 bug。重点盯住 viewport 和真实设备测试就够了。
