Question

我不确定我的媒体查询为什么不起作用。非常初学者。试图让导航菜单以类似的方式响应

http://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_topnav

普通媒体查询也不起作用，我知道我没有将topnav作为导航的类设置，就像在w3示例中那样。我刚刚使用导航。

/**********************************
GENERAL
***********************************/
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

}
html, body {
    height: 100%;
}
body{
margin:0;
padding:0;
background: rgba(226,226,226,1);
}

a{
  text-decoration: none;
}

li{
  list-style-type: none;
  display: inline
}

#wrapper{
  max-width: 100%;
  max-height: 100%;
  /*min-height: calc(100vh - 120px);*/
    /* 80px header + 40px footer = 120px  */
  width: 85%;
  margin: 0 auto;
  overflow: visible;
  position:relative;
  background: rgba(147,206,222,1);


}

img{
  max-width: 100%;
  width: 200px;
  margin-right: 15px;
  float: left;
  margin-bottom: 20px;
  padding:1px;
  border:1px solid #021a40;
}

h1{
  text-align: center;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.8);
  font-family: Garamond;
}

/**********************************
HEADING
***********************************/
header{
  color:blue;
  text-align: left;
  float: left;
  margin: 0 0 30px 0;
  padding: 20px 0 0 0;
  width: 100%;
  font-size: 32;
}


/**********************************
NAVIGATION
***********************************/
nav{
  max-width: 100%;
  max height: 100%;
  padding: 3.5em;
  margin: 0;
  background-color: green;
  text-align: right;
  font-family: Garamond;


}

nav ul {
  list-style: none;
  margin: 0 10px 20px; /*pushes div down*/
  padding: 0;
  text-decoration: none;
  /*background-color: purple;*/
  max-width: 100%;
  max-height: 200px;

}

nav menu:{



}

nav li {
  display: inline-block;
}

nav a, a:link, a:visited {
  font-weight: 800;
  padding: 15px 10px;
  /*border-style: double;*/
  border-radius: 10px;
  margin-bottom: 20px;
  color:white;
  text-align: center;
  font-weight: bold;
  text-transform: uppercase;

}

a:hover{
  background-color: gray;
}

#back-to-hp{
  text-align: left;
}

/**********************************
FOOTER
***********************************/
footer {
background: rgba(255,255,255,1);
  /*max-height: 100%;
    position:relative;
    left: 0;
    bottom: 0;
    height: 60px;
    width: 100%;
    overflow:hidden;
    text-align: center;*/
    width:100%;
    height:100px;
    position:relative;
    bottom:0;
    left:0;
    padding-top: 10px;
    margin-top: 15px;

}
}



/**********************************
PAGE: ADOPTION
***********************************/
#image-paragraph{
  font-size: 20;
  text-align: center;
  float: right;
}
#content{
font-family: Garamond;

}
/**********************************
PAGE: ABOUT
***********************************/



/**********************************
PAGE: CONTACT
***********************************/


/**********************************
COLORS
***********************************/

/**********************************
MEDIA QUERIES
***********************************/
/*@media all (max-width: 960px) {
  body{
    background-color: royalblue;
  }
p{
  color:white;
}
}

@@media (min-width:481px) and (max-width: 700px) {


}*/

@media screen and (max-width:680px) {
  ul.nav li:not(:first-child) {display: none;}
  ul.nav li.icon {
    float: right;
    display: inline-block;
  }
}

@media screen and (max-width:680px) {
  ul.nav.responsive {position: relative;}
  ul.nav.responsive li.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  ul.nav.responsive li {
    float: none;
    display: inline;
  }
  ul.nav.responsive li a {
    display: block;
    text-align: left;
  }
}

Answer 1

您有两个媒体查询，最大宽度为680像素。可能一个是最小宽度？如果没有，那么我不明白为什么你没有把它全部放在一个媒体查询中。

修改：

尝试将ul.nav li:not(:first-child) {display: none;}更改为nav ul li:not(:first-child) {display: none;}。

这是因为媒体查询将css视为嵌套在其父项中，因此您需要正确包含父元素。

此外，根据经验，我注意到visibility: hidden;在许多情况下始终比display: none;更好地工作。这取决于你的元素定位。在你的情况下都适用。

基本媒体查询不起作用

1 个答案: