Question

当我打开窗口时，移动导航图标消失就可以显示桌面导航，但是当它大于指定的屏幕宽度时，mobileNavSections div不会消失。切换功能按预期工作。

function displayMobileNav(){
  var x = document.getElementById("mobileNavSections");
  if (x.style.display == "block") {
    x.style.display = "none";
  } else {
    x.style.display = "block";
  }
}

.mobileNav {
  display: none;
}

#mobileNavSections {
  display: none;
  background-color: white;
  position: fixed;
  z-index: 1;
  margin-top: 60px;
  width:100%;
  height: flex;
}

#mobileNavSections a {
  display:block;
  color: black;
  margin: 5%;
  text-decoration: none;
  font-size: 17px;
  opacity:0.5;
}

#mobileNavSections a:hover {
  opacity: 1;
} 


@media only screen 
  and (max-width: 768px){
    .mobileNav{
      display: block;
    }

    .mobileNav img {
      height: 30px;
    }

    .mobileNav:hover {
      cursor: grab;
    }
}

<nav>
  <div class="mobileNav" onclick="displayMobileNav()">
    <img src="images/menuicon.svg">
  </div>
</nav>
<div id="mobileNavSections">
  <a href="#About">About</a>
  <a href="#Contact">Contact</a>
  <a href="#">中文</a>
</div>

Answer 1

添加此CSS媒体查询应该会完成隐藏您未用JS覆盖的导航部分

@media screen and (min-width: 769px){
     #mobileNavSections{
          display:none;
     }
}

我肯定会在将CSS放在一起时首先推荐更多的移动设备。媒体查询和替代会很快变得令人头疼。这里是一些提示和进一步的阅读：

移动优先CSS的编写如下：

移动样式和所有屏幕尺寸通用的样式

（无媒体查询）

[icon name = icon-arrow-down]

具有最小宽度断点的媒体查询

例如@media（最小宽度：400像素）

[icon name = icon-arrow-down]

媒体查询的最小宽度断点稍大

例如@media（最小宽度：600像素）

[icon name = icon-arrow-down]

具有更大的最小宽度断点的媒体查询

例如@media（最小宽度：960px）

一种思考方式是，从移动基础开始，然后逐步建立（或者，如果考虑宽度，则逐步扩展）。

https://www.mightyminnow.com/2013/11/what-is-mobile-first-css-and-why-does-it-rock/

调整窗口大小后，“移动导航”下拉菜单不会消失

1 个答案: