CSS媒体查询在网站内页不生效的原因排查求助

看起来你已经把首页的头部代码原封不动搬到内页了，但媒体查询就是没起作用，这种情况我也碰到过几次，大概率是这几个地方出了问题，咱们一步步来排查：

1. 先检查CSS样式表的引用路径 #

内页的文件结构可能和首页不一样，比如如果内页放在子文件夹（比如pages/demo.html），那你引用样式表的路径如果还是style.css就会找不到，得改成../style.css。

你可以打开内页的开发者工具（F12），在「网络」标签里看看样式表有没有加载成功，要是显示404，那肯定是路径错了。

2. 确认内页HTML结构和类名完全匹配 #

虽然你说复制了相同代码，但可能不小心漏了细节：

• 检查头部的容器div有没有加class="header"，你的媒体查询样式都是基于这个容器下的元素写的，类名不对的话样式根本不会关联上。
• 核对所有元素的类名：navigate、googlepic、navpic这些有没有拼写错误，CSS类名是区分大小写的，哪怕差一个字母都不行。

3. 排查是否有其他CSS覆盖了媒体查询样式 #

有时候内页可能额外引入了其他样式表，或者在页面内写了<style>标签，里面的样式优先级比外部媒体查询高，导致媒体查询的规则被划掉了。

用开发者工具选中没生效的元素（比如input.navigate），看看「样式」面板里媒体查询的规则是不是被划掉了。如果是，给媒体查询里的样式加个更高优先级，比如改成.header input.navigate { display: none; }。

4. 务必检查视口元标签 #

移动端媒体查询生效的前提是页面设置了视口元标签，要是内页没加这个，浏览器会用桌面端的视口宽度渲染，媒体查询自然不会触发。
你需要在内页的<head>里加上：

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

首页肯定是加了这个的，不然媒体查询也不会生效，内页很大概率漏了这个关键标签！

5. 最后再核对一遍媒体查询语法 #

虽然首页生效了，但还是可以确认下内页引用的CSS里的代码有没有拼写错误，比如括号、分号有没有漏写。你的代码看起来是对的，再确认一遍：

@media (max-width: 700px) { 
  input.navigate { display: none; } 
  img.googlepic {display: none;} 
  img.navpic {display: none;} 
  nav select { display: inline;} 
}

另外提个小细节：你HTML里用<a>包裹<option>的写法是不符合规范的，<option>不能放在<a>里面，应该给<select>加onchange事件实现跳转，比如：

<select onchange="if(this.value) window.location.href=this.value">
  <option value="" selected="selected">Nav</option>
  <option value="index.html#pagetop">Home</option>
  <option value="demo.html">Learn More</option>
  <option value="aboutus.html">The RMS Team</option>
  <option value="blog.html">Blog</option>
  <option value="index.html#contactus">Contact Us</option>
</select>

这个写法更稳妥，避免浏览器出现奇怪的兼容性问题。

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