CSS Media Screen失效求助：移动端无法隐藏Footer

嘿，作为踩过不少CSS媒体查询坑的开发者，我来帮你梳理几个可能的原因——毕竟单独测试有效但项目里失效，大概率是项目环境的细节问题：

• CSS优先级被覆盖
  项目里可能存在其他优先级更高的.footer样式，比如：

  • 你的媒体查询代码写在了普通.footer样式的前面（CSS遵循「后定义覆盖前定义」规则）
  • 其他地方用了更具体的选择器（比如.page-container .footer）或者加了!important
    解决办法：
  • 把媒体查询代码放在所有CSS代码的最后面
  • 给媒体查询里的样式临时加!important测试：visibility: hidden !important;
  • 提升选择器特异性，比如用body > .footer代替.footer

• 缺少视口元标签
  移动端浏览器默认会把页面模拟成桌面宽度（通常是980px），导致max-width:600px的媒体查询根本不会触发！必须在HTML的<head>中添加：

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

  这是移动端媒体查询生效的核心前提，很多新手容易忽略这一点。

• 语法或拼写错误
  虽然单独测试没问题，但粘贴到项目里可能不小心出现语法失误，比如：

  • 漏了大括号、括号配对错误
  • @media拼写错误（比如写成@meida）
    仔细检查项目里的媒体查询代码，确保和你单独测试的代码完全一致。

• 样式属性选择的误导性
  visibility: hidden只是让元素不可见，但仍然会占据页面空间，有时候可能看起来没生效，但其实是元素还在那里。可以换成display: none试试，这个属性会彻底移除元素的占位，更容易判断是否生效：

  @media screen and (max-width: 600px) {
    .footer {
      display: none;
    }
  }
  

• 浏览器缓存问题
  浏览器可能缓存了旧的CSS文件，导致新添加的媒体查询没有被加载。可以尝试：

  • 强制刷新页面：Windows按Ctrl+Shift+R，Mac按Cmd+Shift+R
  • 清除浏览器缓存后再测试

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