在某个断点通过JS自动更改CSS

Question

我正在构建一个响应导航，因此我有一个按钮可以通过Javascript更改div的样式。（在display: none;和display: block;之间切换。在小屏幕上，它可以完美地工作。然而，当我在一个小屏幕上显示和隐藏导航并调整窗口大小时，导航仍然是隐藏的。

如果窗口有一定的大小，有没有办法自动更改css？

这是我正在使用的代码（顺便说一句：我是Javascript的新手）再次：查看缩小窗口、打开和关闭导航以及再次调整窗口大小时会发生什么。导航仍然隐藏（并非如所需）：http://codepen.io/HannesDev/pen/grjdqK

---

HTML:

<div class="btn-Nav">Navigation</div>
<nav id="nav-hor" role="navigation">
<ul>
   <li>One</li>
   <li>Two</li>
   <li>Three</li>
 </ul>
</nav><!-- #site-navigation -->

CSS：

html{
  background: lime;
}
/* The Button */
.btn-Nav{
  border: 2px solid grey;
  cursor: pointer;
}
/* The button changes to the greyed out closed area on the right */
.btn-Nav_open{
  position: fixed;
  margin-left: 80vw;
  left: 0;
  top: 0;
  width: 20vw;
  height: 100vh;
  background-color: black;
  color: white;
  opacity: .2;
  padding: .2em;
  text-align: center;
  font-size: 3em;
}
/* The Navigation on small screens */
#nav-hor{
  display: none;
  position: fixed;
  overflow-y: scroll;
  top: 0;
  width: 80vw;
  height: 100vh;
  background-color: white;
  z-index: 999;
  border-right: 1px solid grey
}

@media (min-width: 50em) { 
  html{
    background: red;
  }
  /* Don't show the button on bigger screens */
  .btn-Nav{
    display: none;
  }
 /* The Navigation for bigger screens */
  #nav-hor {
    /* Clean up */
    display: flex;
    position: relative;
    overflow: visible;
    width: 100%;
    height: auto;
}

JS:

window.onload = function(){
  document.querySelector('.btn-Nav').onclick = function(){
    // closed
      if(this.className.match('btn-Nav btn-Nav_open')) {
          this.className = 'btn-Nav';
          document.getElementsByClassName("btn-Nav")[0].innerHTML = "Navigation";
          document.getElementById('nav-hor').style.display = "none";
          document.body.style.overflow = "auto";
      }
      // open
      else {
          this.className = 'btn-Nav btn-Nav_open';
          document.getElementsByClassName("btn-Nav")[0].innerHTML = "×";
          document.getElementById('nav-hor').style.display = "block";
          document.body.style.overflow = "hidden";
      }
  };
};

Answer 1

如果窗口有一定的大小，有没有办法自动更改css？

当然，你不需要Javascript。CSS提供了一种叫做媒体查询的东西，它允许你根据某些条件更改元素的样式。对于你的具体情况，一些类似的东西

@media only screen and (max-width: 500px) {
    #navigation {
        display: block;
    }
}

这会将#导航元素的显示更改为仅在浏览器窗口小于500px时阻止。最大宽度值绝对可以更改。媒体查询还可以做一些其他很棒的事情，例如：http://www.w3schools.com/css/css_rwd_mediaqueries.asp.