큰 화면에서 CSS가 제대로 작동하지 않습니다.

Question

나는 반응 형 웹 사이트를 만들려고합니다. 모든 것이 잘되지만 큰 화면에서는 링크 스타일이 작동하지 않습니다. 링크 스타일은 별도의 CSS 파일에 있으며 모바일 및 노트북 화면에서 잘 작동합니다. 문제가 어디 있는지 아십니까? 어떤 도움을 주셔서 미리 감사드립니다! 링크 스타일 수평 탐색 메뉴 및 CSS 파일의 일부에 대한 내 HTML 코드 아래

는 :

.topnav, .topnav a:link{ 
 
    background-color: #bb0303; 
 
    overflow: hidden; 
 
    color: white; 
 
} 
 
.topnav a { 
 
    float: left; 
 
    display: block; 
 
    color: white; 
 
    text-align: center; 
 
    padding: 14px 16px; 
 
    text-decoration: none; 
 
    font-size: 17px; 
 
    color: white; 
 
} 
 
.topnav a:hover { 
 
    background-color: #f6a9a9; 
 
    color: white; 
 
} 
 
.topnav a:visited, .optionL a:visited { 
 
    color: white; 
 
} 
 
.topnav .icon { 
 
    display: none; 
 
} 
 

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

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

 
@media (max-width: 2560px) and (min-width: 1100px) { 
 
    #container {width:1050px; background-color: #bb0303;} 
 
    #sidebar {width:21%; } 
 
    #contentpages {width:76.438%;} 
 
    #topbar img {width: 100%;} 
 
    .box1 {width: 22%;} 
 
    .box2 {width: 32%; text-align: left;} 
 
    .box3 {width: 28%;} 
 
    .box4 {width: 31%;} 
 
} 
 

 
@media (max-width: 1100px) and (min-width: 1000px) { 
 
    #container {width:950px;} 
 
    #sidebar {width:30%;} 
 
    #contentpages {width:55%;} 
 
    #topbar img {width: 100%;} 
 
} 
 
@media (max-width: 1000px) and (min-width: 800px) { 
 
    #container {width:750px; background-color: #bb0303;} 
 
    #sidebar {width:30%;} 
 
    #contentpages {width:67%;} 
 
    #topbar img {width: 100%;} 
 
} 
 
@media (max-width: 800px) and (min-width: 500px) { 
 
    #container {width:450px;} 
 
    #sidebar, 
 
    #contentpages {width:100%; background-color: blue;} 
 
    #topbar img {width: 100%;} 
 
    .box5 {margin-left: 15%;} 
 
} 
 

 
@media (max-width: 500px) { 
 
    #container {width:100%; background-color: #bb0303;} 
 
    #sidebar, 
 
    #contentpages {width:100%;} 
 
    #topbar img {width: 100%;} 
 
    .box1 {margin-bottom: 5%;, } 
 
    .box2 {height: 25%; margin-bottom: 5%;} 
 
    .box3 {margin-bottom: 5%;} 
 
    .box4 {margin-bottom: 5%;} 
 
    .box5 {margin-left: auto; margin-right: auto;} 
 
} 
 

 
a:link { 
 
    color: #CD5C5C; 
 
} 
 

 
a:visited { 
 
    color: #B22222; 
 
} 
 

 
a:hover { 
 
color: #F08080; 
 
} 
 

 
a:link, a:visited, a:hover, a.tlink:link, a.tlink:visited, a.tlink:hover { 
 
    text-decoration: none; 
 
} 
 

 
a.tlink:link, a.tlink:visited { 
 
    color: white; 
 
} 
 

 
#topbar { 
 
    color: white; 
 
    background-color: #bb0303; 
 
    padding: 10px; 
 
    margin-top: 10px; 
 
    margin-bottom: 5px; 
 
}

<div class="topnav" id="myTopnav"> 
 
    <a href="a.html">A</a> 
 
    <a href="b.html">B</a> 
 
    <a href="c.html">C</a> 
 
    <a href="d.html">D</a> 
 
    <a href="javascript:void(0);" class="icon" onclick="myFunction()">&#9776;</a> 
 
</div>

Answer 1

@media screen and (max-width: 800px) { 이것은 단지 800 픽셀까지, 작은 화면에서 작동 말한다.

다른 값을 가진 두 개의 규칙이 있지만 최대 너비 값이없는 규칙은없는 것처럼 보이므로 매우 큰 화면 (사용자가 정의한 최대 값 인 2560px) 아무것도 적용되지 않습니다.

NNNpx 이상의 모든 항목에 적용되도록 최대 너비가없는 규칙을 하나 이상 만들 것을 제안합니다.