Css 如何在手机中更改顶部导航背景颜色

在手机中查看时，希望将导航的背景色更改为黑色。然后将“菜单”文本更改为白色，以便您可以看到文本。谢谢你的帮助。我找不到合适的css选择器来定位这个

www.jobspark.ca

******更新******************

@media all and (max-width: 640px) {
.top-nav {
 background: #000 !important;
 color: #fff !important;
 } 
}

---

您可以通过css中的媒体查询以特定视口宽度为目标：

@media all and (max-width: 400px) {
  .top-nav {
     background-color: black;
     color: white;
  }
}

这是使用css的唯一方法，您不能针对特定设备（移动设备、平板电脑），而是针对该设备的某些特定属性（在本例中为宽度或屏幕）

---

您可以通过谷歌搜索“媒体查询”或“响应式设计”来查找更深入的示例。

您的第一个问题是页面上没有包含

类的元素。top nav

。你的意思可能是

.nav

。然而，除了背景色之外，还有更多的问题。您需要为小屏幕上的导航设置更多样式，以便它显示出来

---

在桌面浏览器（如Chrome）上，右下缩小浏览器范围，然后右键单击菜单以检查元素。您可以看到应用于该宽度菜单的所有样式，然后开始设置菜单的样式。

我就是这样解决的：

@media (max-width: 640px) {
    .mobile-nav .show-nav {
        display: block;
        padding: 1em 40px;
        color: #fff;
        background: #000; 
        cursor: pointer;
        border-bottom: 1px solid #000;
    }
}

---

这应该可以解决问题，但是您应该注意屏幕宽度不应该超过940px。940px可以确保它可以与几乎任何移动设备一起工作

@media only screen and (max-width: 940px) { 
     .top-nav {
         background: #000 !important;
         color: #fff !important;
        } 
}

---

@媒体（最大宽度：640px）{.top导航{background:#000！重要；color:#fff！重要；似乎不太有效，但我认为我们在正确的轨道上}}@ChrisS编辑，但只是一个示例，适合您的特定需要我不知道为什么它不起作用。我玩了一会儿，还是一无所获。我把代码放在上面，请提供更多反馈。您使用什么浏览器或移动设备进行测试？你能在Firebug中看到应用的样式吗？顶部导航？谢谢你的关注。我能够想出的样式，只需要找出一种方法，插入到导航标志不知何故。我正试图摆脱+和切换它的标志