基本媒體查詢不起作用

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

您有兩個媒體查詢設置最大寬度爲680px。可能有一個意思是最小寬度？如果沒有，那麼我不明白爲什麼你沒有把它放在單個媒體查詢下。

編輯：

嘗試改變ul.nav li:not(:first-child) {display: none;}到nav ul li:not(:first-child) {display: none;}。

這是因爲媒體查詢讀取父母嵌套的CSS，因此您需要正確包含父元素。

另外，從經驗來看，我注意到visibility: hidden;在許多情況下始終比display: none;的效果更好。不過，這取決於你的元素定位。要麼在你的情況下工作。