미디어 쿼리 및 뷰포트가 작동하지 않습니다.

웹 사이트에 액세스하는 데 사용 된 장치가 너무 커서 전체 탐색 모음에 맞지 않을 때 반응 형 탐색 모음을 만들려고합니다. 그러면 드롭 다운으로 축소됩니다. 이상하게도, 내가 사용하고있는 미디어 쿼리가 웹 사이트에 아무 것도하지 않는 것처럼 보입니다. 내 HTML 파일의 머리에서 나는이 있습니다미디어 쿼리 및 뷰포트가 작동하지 않습니다.

@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 파일의 하단에있는 미디어 쿼리를 넣어 : 여기

<meta name="viewport" content="width=device-width, initial-scale=0.8" >는 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

미디어 쿼리 및 뷰포트가 작동하지 않습니다.

답변

관련 문제