Javascript 导航栏取决于宽度

我正试图使我的网站更加移动友好，我想使导航栏隐藏元素时，屏幕变得太小的宽度。我该怎么做呢？我对javascript不是很熟悉，所以请详细解释一下每件事的作用

我的网站：
现在有点荒芜

我当前的导航栏如下所示：

    <header>
        <div class="navBar navCenter">
            <div class="navHome navElement">
                <a href="#home" class="homeButton">Home</a>
            </div>
            <div class="navStore navElement">
                <a href="#store" class="storeButton">Store</a>
            </div>
            <div class="navAbout navElement">
                <a href="#about" class="aboutButton">About</a>
            </div>
            <div class="navGallery navElement">
                <a href="#gallery" class="galleryButton">Gallery</a>
            </div>
            <div class="navContact navElement">
                <a href="#contact" class="contactButton">Contact</a>
            </div>
        </div>
    </header>

---

如果您想根据屏幕大小隐藏某些内容，最好的方法是使用媒体查询。您需要做的是在css中包含类似的内容

@media screen and (max-width: 352px){
  #about {
    display:none;
  }
}

如果屏幕大小小于352 px并隐藏about部分，则上述操作将生效。或者，如果您想为最小屏幕大小做些什么，也可以使用最小宽度媒体查询。如果您的屏幕大小大于352px，以下内容将生效

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

---

您可以在CSS中使用@media属性，例如

@media (max-width:600px){
/* Items you want to hide or show by using display:none; for it */ 
}

---

因此，您可以从那里调整任何屏幕的每个关键宽度和高度，通常您只需要3个@媒体属性：小屏幕、中屏幕、平板电脑

如果您想根据屏幕分辨率更改CSS样式，请使用媒体查询！它们相当简单，我通常从这个列表开始，然后根据需要添加新查询或删除现有查询：

/*=============桌面优先方法==========*/
/*大设备、宽屏幕*/
@仅介质屏幕和（最大宽度：1200px）{
}
/*中型设备、台式机*/
@仅介质屏幕和（最大宽度：992px）{
}
/*小型设备、平板电脑*/
@仅介质屏幕和（最大宽度：768px）{
}
/*超小型设备、电话*/
@仅介质屏幕和（最大宽度：480px）{
}
/*定制，iPhone视网膜*/
@仅介质屏幕和（最大宽度：320px）{
}
/*=============移动第一种方法==========*/
/*定制，iPhone视网膜*/
@仅介质屏幕和（最小宽度：320px）{
}
/*超小型设备、电话*/
@仅介质屏幕和（最小宽度：480px）{
}
/*小型设备、平板电脑*/
@仅介质屏幕和（最小宽度：768px）{
}
/*中型设备、台式机*/
@仅介质屏幕和（最小宽度：992px）{
}
/*大设备、宽屏幕*/
@仅介质屏幕和（最小宽度：1200px）{
}

您确定需要JavaScript吗？你听说过吗？我已经在我的css中应用了你的示例代码片段，但是在调整窗口大小时，我的div不会消失，但是我放在网页“关于”部分的图像会消失…@MineGlade，如果你使用的是框架，有时你需要使用

！重要信息

覆盖框架样式的规则。尝试使用显示：无！重要的

@media (max-width:600px){
/* Items you want to hide or show by using display:none; for it */ 
}