CSS @media查询未生效：最后一条查询无响应求技术解答

看你给出的代码，最后一个针对360px宽度的媒体查询没起作用，大概率是以下几个常见问题导致的，咱们逐个排查：

1. 缺少移动端视口元标签 #

这是移动端媒体查询失效最普遍的原因！如果你的HTML头部没加视口标签，移动端浏览器会默认把页面渲染成桌面端宽度（通常是980px左右），这样max-width:360px的条件永远不会被触发。

解决方法：在HTML的<head>标签里添加这段代码：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

2. .box-wrapper的left属性本身无效 #

left属性只对设置了定位的元素生效（也就是position: relative/absolute/fixed的元素）。如果你的.box-wrapper基础样式里没设置定位，哪怕媒体查询触发了，left: -20px也不会有任何视觉变化。

检查并补充基础样式：

.box-wrapper {
  /* 必须添加以下任一定位属性 */
  position: relative;
  /* 也可以是 absolute 或 fixed，根据你的布局需求选择 */
}

3. 样式优先级被覆盖 #

如果.box-wrapper的基础样式里，left属性被更具体的选择器或者!important覆盖了，媒体查询里的样式就不会生效。比如：

/* 更具体的选择器优先级更高 */
.header .box-wrapper {
  left: 0 !important; /* 或者不带!important但选择器权重更高 */
}

解决方法：要么提升媒体查询里选择器的优先级（比如写成.parent-container .box-wrapper），要么去掉基础样式里的!important（尽量避免使用!important，它会让样式调试变得复杂）。

4. 浏览器缓存问题 #

有时候浏览器会缓存旧的CSS文件，导致新添加的媒体查询没被加载。可以尝试强制刷新页面（Windows按Ctrl+F5，Mac按Cmd+Shift+R），或者清除浏览器缓存后再测试。

额外小检查：媒体查询语法 #

你的最后一个媒体查询语法是正确的，但可以快速核对一遍有没有拼写错误、括号是否闭合——从你给出的代码看这部分没问题，但多确认一遍总没坏处。

内容的提问来源于stack exchange，提问作者Jodey