css - 如何在移动设备中更改顶部导航背景颜色

Question

希望在移动设备中查看时将导航的背景颜色更改为黑色。然后想将“菜单”文本更改为白色，以便您可以看到文本。谢谢您的帮助。我找不到合适的 CSS 选择器来定位它。

www.jobspark.ca

** * *已更新* ** * ** * ** * ***

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

Answer 1

您可以通过 CSS 中的媒体查询来定位特定的视口宽度：

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

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

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

Answer 2

您的第一个问题是您的页面上没有具有.top-nav. 你可能的意思是.nav。然而，除了背景颜色之外，还有更多的问题。您需要为小屏幕上的导航设置更多样式才能显示出来。

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

Answer 3

这就是我解决它的方法：

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

Answer 4

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

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