媒體查詢和視口不工作

我試圖做出響應式導航欄，以便當用於訪問該網站的設備太小而不適合整個導航欄時，它會摺疊成下拉菜單。奇怪的是，我使用的媒體查詢似乎沒有對網站做任何事情。在我的HTML文件的頭，我有這樣的：<meta name="viewport" content="width=device-width, initial-scale=0.8" >媒體查詢和視口不工作

這裏是CSS：

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

ul.topnav.responsive { 
    position: relative; 
} 
ul.topnav.responsive li.icon { 
    position: absolute; 
    right: 0; 
    top: 0; 
} 
ul.topnav.responsive li { 
    float: none; 
    display: inline; 
} 
ul.topnav.responsive li a { 
    display: block; 
    text-align: left; 
} 
}

var main = function() { 
 

 
    function openNav() { 
 
     var x = document.getElementById("topnav"); 
 
     if (x.className === "topnav") { 
 
      x.className += " responsive"; 
 
     } else { 
 
      x.className = "topnav"; 
 
     } 
 
    } 
 
} 
 

 
$(document).ready(main);

.jumbotron p { 
 
    font-weight: 400; 
 
    font-family: 'roboto', sans-serif; 
 
} 
 
.topnav { 
 
    font-family: 'Montserrat', sans-serif; 
 
    font-size: 16px; 
 
    background-color: transparent; 
 
    color: black; 
 
    transition: all 0.25s ease; 
 
    position: fixed; 
 
    top: 0; 
 
    width: 100%; 
 
    padding: 20px; 
 
} 
 
ul.topnav { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    overflow: hidden; 
 
    display: flex; 
 
    align-items: center; 
 
} 
 
ul.topnav li { 
 
    float: left; 
 
} 
 
ul.topnav li.icon { 
 
    display: none; 
 
} 
 
.topnav a { 
 
    margin-left: 20px; 
 
    text-decoration: none; 
 
    color: black; 
 
} 
 
.topnav a:hover { 
 
    margin-left: 20px; 
 
    text-decoration: none; 
 
    color: #FACD00; 
 
} 
 

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

 
    ul.topnav.responsive { 
 
     position: relative; 
 
    } 
 
    ul.topnav.responsive li.icon { 
 
     position: absolute; 
 
     right: 0; 
 
     top: 0; 
 
    } 
 
    ul.topnav.responsive li { 
 
     float: none; 
 
     display: inline; 
 
    } 
 
    ul.topnav.responsive li a { 
 
     display: block; 
 
     text-align: left; 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script> 
 
<!DOCTYPE html> 
 

 
<body> 
 

 
    <!--navbar--> 
 
    <ul class="topnav"> 
 
     <li><a href="#">Home</a></li> 
 
     <li><a href="#">Events</a></li> 
 
     <li><a href="#">About</a></li> 
 
     <li><a href="#">Volunteer</a></li> 
 
     <li><a href="#">Contact</a></li> 
 
     <li class="icon"> 
 
      <a href="javascript:void(0);" onclick="openNav()">&#9776;</a> 
 
    </ul> 
 

 

 
</body>

來源

2016-08-28 Jake Xia

你能分享HTML嗎？或者甚至設置一個顯示你的問題的片段（或筆/小提琴）？ –

請複製你到目前爲止在jsfiddle –

我添加了一個片段，謝謝你的建議。 –

只需將媒體查詢的CSS文件的底部。 CSS規則是按特性應用的，並且在選擇器出現的順序具有相同的特性時（這是你的情況）。

還糾正了Artem Gorlachev指出的語法錯誤。

.jumbotron p { 
    font-weight: 400; 
    font-family: 'roboto', sans-serif; 
} 
.topnav { 
    font-family: 'Montserrat', sans-serif; 
    font-size: 16px; 
    background-color: transparent; 
    color: black; 
    transition: all 0.25s ease; 
    position: fixed; 
    top: 0; 
    width: 100%; 
    padding: 20px; 
} 
ul.topnav { 
    list-style-type: none; 
    margin: 0; 
    overflow: hidden; 
    display: flex; 
    align-items: center; 
} 
ul.topnav li { 
    float: left; 
} 
ul.topnav li.icon { 
    display: none; 
} 
.topnav a { 
    margin-left: 20px; 
    text-decoration: none; 
    color: black; 
} 
.topnav a:hover { 
    margin-left: 20px; 
    text-decoration: none; 
    color: #FACD00; 
} 
@media screen and (max-width: 800px) { 
    ul.topnav li:not(:first-child) { 
     display: none; 
    } 
    ul.topnav li.icon { 
     float: right; 
     display: inline-block; 
    } 

    ul.topnav.responsive { 
     position: relative; 
    } 
    ul.topnav.responsive li.icon { 
     position: absolute; 
     right: 0; 
     top: 0; 
    } 
    ul.topnav.responsive li { 
     float: none; 
     display: inline; 
    } 
    ul.topnav.responsive li a { 
     display: block; 
     text-align: left; 
    } 
}

來源

2016-08-28 19:28:43

媒體查詢和視口不工作

回答

相關問題