Question

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

www.jobspark.ca

** * * 更新 * ** < EM> * ** * ** * ***

@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的唯一方法，您无法定位特定设备（移动设备，平板电脑），而是定位该设备的某些特定属性（在这种情况下，宽度或屏幕）。

您可以使用Google搜索“媒体查询”或“响应式设计”来查找更深层次的示例。

Answer 2

您首先要发现的是，您的网页上没有.top-nav类的元素。你的意思可能是.nav。但是，除了背景颜色之外，还有许多问题。您需要为小屏幕上的导航设置更多样式才能显示。

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

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

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

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

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

4 个答案: