javascript - 导航栏取决于宽度

Question

我正在努力使我的网站对移动设备更加友好，并且我想让导航栏在屏幕宽度变得太小时时隐藏元素。我该怎么做呢？我对 javascript 不太熟悉，所以请详细解释一下一切的作用。

我的网站:http://www.mineglade.net/
目前有点贫瘠...

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

    <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 样式:

html, body, main {
    width: 100%;
    padding: 0px;
    margin: 0px;
    font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
    height: 100%;
}
a:link {
    display: inline-block;
    text-align: center;
    color: white;
    text-decoration: none;
    background-color: #222222;
    padding: 16px 16px 16px 16px;
    width: 72px;
}

a:visited {
    display: inline-block;
    text-align: center;
    color: white;
    text-decoration: none;
    background-color: #222222;
    padding: 16px 16px 16px 16px;
    width: 72px;
}

a:hover {
    display: inline-block;
    text-align: center;
    color: white;
    text-decoration: none;
    background-color: #4B4B4B;
    padding: 16px 16px 16px 16px;
    width: 72px;
}

a:clicked {
    display: inline-block;
    text-align: center;
    color: white;
    text-decoration: none;
    background-color: #222222;
    padding: 16px 16px 16px 16px;
    width: 72px;
}

.navBar {
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: auto;
    visibility: visible;
    background-color: #222222;
    position: fixed;
    text-align: center;
    z-index: 999;
    box-shadow: 0px 0px 5px;
}

.navCenter {
    text-align: center;
    height: auto;
}

.navElement {
    text-align: center;
    display: inline-block;
    text-transform: uppercase;
    font-weight: bold;
    vertical-align: middle;
}

Answer 1

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

/*==========  Desktop First Method  ==========*/

/* Large Devices, Wide Screens */
@media only screen and (max-width : 1200px) {

}

/* Medium Devices, Desktops */
@media only screen and (max-width : 992px) {

}

/* Small Devices, Tablets */
@media only screen and (max-width : 768px) {

}

/* Extra Small Devices, Phones */
@media only screen and (max-width : 480px) {

}

/* Custom, iPhone Retina */
@media only screen and (max-width : 320px) {

}


/*==========  Mobile First Method  ==========*/

/* Custom, iPhone Retina */
@media only screen and (min-width : 320px) {

}

/* Extra Small Devices, Phones */
@media only screen and (min-width : 480px) {

}

/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {

}

/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {

}

 /* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {

}

媒体查询很直观，但如果您是新手，这里有一些信息: https://www.w3schools.com/css/css_rwd_mediaqueries.asp https://www.w3schools.com/css/css3_mediaqueries_ex.asp https://www.w3schools.com/cssref/css3_pr_mediaquery.asp

“我想让导航栏在屏幕宽度变得太小时隐藏元素”

只需选择媒体查询(或定义新的媒体查询)并在此媒体查询中写入新规则。如果你想隐藏元素，例如当屏幕宽度小于1200px时，应该是这样的:

@media only screen and (max-width : 1200px) {
  #element-id {
    display: none;
  }
}