Question

我试图让我的网站更加适合移动设备，并且当屏幕宽度太小时我想让navBar隐藏元素。我该怎么做呢？我对javascript不是很熟悉所以请详细说明一切。

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

我当前的navBar看起来像这样：

    <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样式 - 请使用媒体查询！它们相当简单，我通常从这个列表开始，然后根据需要添加新的或删除现有的查询：

＆＃13;

/*==========  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) {

}

＆＃13;

媒体查询很直观，但如果你是全新的话，这里有一些信息： 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

＆＃34;当屏幕宽度太小时，我想让navBar隐藏元素＆＃34;

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

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

Answer 2

如果您想根据屏幕尺寸隐藏某些内容，最好的方法是使用媒体查询。你需要做的是在你的css中加入这样的东西

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

如果屏幕尺寸小于352像素，则上述操作将生效并隐藏关于部分。或者，如果您想要为最小屏幕尺寸执行某些操作，还会有最小宽度的媒体查询。如果您的屏幕尺寸大于352px

，以下内容将生效

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

Answer 3

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

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

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

navBar取决于宽度

3 个答案: