响应式失效主因是缺失viewport标签、CSS路径错误或选择器权重不足；需检查<meta name="viewport">是否存在且位置正确，确认CSS文件200加载，将媒体查询样式置于常规样式之后并提升选择器权重。
VS Code 里写 HTML5 响应式页面，media query 不生效？先看 <meta name="viewport">
绝大多数情况不是 CSS 写错了，而是页面压根没启用移动端视口缩放机制。VS Code 只是编辑器，不干预运行逻辑，但新手常忽略这个基础标签。
检查你的 <head> 是否包含：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
缺这行，浏览器（尤其 Chrome 移动模拟器）会以桌面宽度渲染，@media (max-width: 768px) 等规则永远不触发。
- 如果用了
width=1200或user-scalable=no，也会导致媒体查询“看起来无效” - 确保该
<meta>标签在<title>之后、其他 CSS 引入之前 —— 部分旧版 WebView 对顺序敏感 - 用 VS Code 实时预览插件（如 Live Server）时，刷新后务必检查浏览器地址栏是否显示
http://127.0.0.1:5500/xxx.html，而非直接双击打开的file:///协议（后者可能禁用部分 viewport 行为）
VS Code 中 CSS 文件未被正确加载，@media 自然不执行
响应式失效常被误判为媒体查询问题，实际是 CSS 根本没进浏览器。VS Code 不报错，但路径或引入方式一错就静默失败。
立即学习“前端免费学习笔记（深入）”；
- 确认
<link rel="stylesheet" href="style.css">的href路径正确：相对路径以 HTML 文件所在目录为基准，不是 VS Code 工作区根目录 - 如果 CSS 在子文件夹（如
css/style.css），HTML 中必须写href="css/style.css"，而不是href="style.css" - 用浏览器开发者工具（F12 → Network → CSS）查看该 CSS 文件状态码是否为 200；若显示 404 或 pending，就是路径或服务器配置问题
- Live Server 插件默认开启缓存，改完 CSS 后可强制刷新（Ctrl+F5）或禁用缓存（DevTools → Network → ✅ Disable cache）
@media 规则写对了，但样式没覆盖？优先级和层叠顺序是关键
媒体查询本身生效了，但元素没变样，大概率是选择器权重不够，被普通 CSS 覆盖。VS Code 里看着代码整齐，但浏览器只认最终计算出的 specificity。
- 避免用
!important治标：它会让后续维护变困难，且在媒体查询嵌套中容易失控 - 把响应式规则写在常规样式之后 —— CSS 是自上而下解析，后声明的同权重规则胜出
- 提升选择器权重：比如原先是
.header { color: red; }，响应式里别只写@media (max-width: 768px) { .header { color: blue; } }，可改成@media (max-width: 768px) { body .header { color: blue; } } - 注意伪类、属性选择器影响权重：例如
nav a:hover权重高于.mobile-nav，调试时可用 DevTools 的 Computed 面板看哪条规则被 strike-through
设备像素比、缩放与媒体查询匹配偏差
在高 DPI 屏幕（如 MacBook Retina、安卓旗舰机）或手动缩放网页时，width 媒体查询可能“对不上号”。这不是 VS Code 的锅，但开发时容易误判。
-
@media (max-width: 768px)匹配的是 CSS 像素（CSS px），不是物理像素。1px CSS 宽度在 2x 屏上占 2 物理像素，但媒体查询仍按 CSS 像素判断 - 浏览器缩放（Ctrl+/-）会改变视口 CSS 宽度值，导致原本 769px 的窗口缩放到 80% 后变成 ~615px，意外触发
max-width: 768px—— 这属于正常行为，不是 bug - 更稳妥的写法是用
@media (max-width: 768px) and (orientation: portrait)加限定，或改用min-width+ 移动优先（mobile-first）策略，减少依赖单一断点
