CSS媒体查询失效求助：移动端导航栏仅显示Home按钮无效果

我帮你排查出了几个关键问题，这就帮你解决：

1. @media规则拼写错误 #

你CSS里的媒体查询写成了 u/media screen and (max-width: 680px)，这里少了一个@符号，正确的写法应该是@media。这个拼写错误会导致浏览器完全忽略这条媒体查询规则，这是最核心的问题。

2. HTML链接的引号闭合错误 #

你的HTML里所有导航链接的href属性都写错了，比如<a href="#home>">Home</a>，这里的引号多了一个>，正确的写法应该是<a href="#home">Home</a>。虽然这个不直接影响@media规则，但会导致链接无法正常跳转，也需要一起修复。

修正后的完整代码 #

CSS样式表（style.css） #

/*#################Defults############*/
nav, header, footer { display: block; }
body { line-height: 1; margin: 0; }
/*################Nav Bar##################*/
nav { width: 100%; margin: 0; }
nav ul { background-color: #eee; overflow: hidden; margin: 0; padding: 0; }
ul.topnav li { list-style: none; float: left; }
ul.topnav li.topnav-right { float: right; }
ul.topnav li a { display: block; text-decoration: none; min-height: 16px; text-align: center; padding: 14px; text-transform: uppercase; color: #666; }
ul.topnav li a:hover { background-color: #0080ff; color: #fff; }
ul.topnav li.dropdownIcon { display: none; }
/*################# mobile #############*/
@media screen and (max-width: 680px) {
  ul.topnav li:not(:nth-child(1)) { display: none; }
}

HTML代码 #

<!doctype html>
<html lang="en">
<head>
  <title> MY CSS website</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <nav>
    <ul class="topnav">
      <li><a href="#home">Home</a></li>
      <li><a href="#news">News</a></li>
      <li><a href="#contact">Contact</a></li>
      <li><a href="#about">About</a></li>
      <li class="topnav-right"><a href="#signup">Sign Up</a></li>
      <li class="topnav-right"><a href="#signin">Sign In</a></li>
      <li class="dropdownIcon"><a href="">&#9776;</a></li>
    </ul>
  </nav>
</body>
</html>

额外测试建议 #

修复后，你可以：

• 打开Chrome浏览器的开发者工具（F12），切换到设备模拟模式，选择宽度≤680px的设备查看效果
• 或者手动缩小浏览器窗口宽度到680px以下，确认除了Home按钮外其他导航项是否隐藏
• 如果还是没效果，可以尝试清除浏览器缓存（Ctrl+Shift+R强制刷新），避免旧的CSS文件被缓存

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