如何根据视口使导航栏响应？

Question

我想制作一个响应式网页。我希望它根据视口显示不同的导航。这是我目前拥有的 javascript：

var shownav = document.getElementById('show-nav');

if (screen.width < "720"){
  shownav.style.display = 'block';
}

但由于某种原因，它不起作用。你能帮帮我吗？

Answer 1

您可以在没有 javascript 的情况下使用 media-query:

实现此目的

#show-nav {
  display: none;
  background-color: red;
}

/* if screen width is smaller than 720px, #show-nav will be a block */
@media only screen and (max-width: 720px) {
  #show-nav {
    display: block;
  }
}

<nav id="show-nav">
  Navbar
</nav>

Answer 2

您只能使用 css 来这样做。

DEMO（整页）

body{
  margin: 0;
}
nav{
  width: 100vw;
  background:yellow;
}

@media only screen and (min-width: 720px){
  nav{
    background:red;
  }
}

<nav>
  <ul>
    <li>Welcome</li>
  </ul>
</nav

Answer 3

@media only screen and (max-width: 720px) {
  #show-nav {
    display: block;
  }
}

如何根据视口使导航栏响应？

How do I make the navbar responsive depending on the viewport?

html

javascript

css

responsive

DEMO（整页）