@media로 글꼴 크기를 변경할 수 없습니다

Question

브라우저 창이 작아짐에 따라 글꼴 크기가 줄어든 메뉴를 갖기 위해 노력하고 있습니다. 여기에 내가있어 무엇 :

CSS는 :

@media screen and (max-width : 1115px) { 
    /*Make font on menu smaller*/ 
    nav a { 
     font-size: smaller; 
    } 
} 
    nav a { 
     text-decoration: none; 
     display: inline-block; 
     border-bottom: 3px solid transparent; 
     transition: 0.5s ease; 
     white-space: nowrap; 
     height: 20px; 
     color: #171581; 
     padding: 8px 8px 8px 8px; 
     font-family: HelveticaNeue-Thin; 
     font-weight: 100; 
     font-size: medium; 
    } 

HTML

<nav> 
    <label for="show-menu" class="show-menu"></label> 
    <input type="checkbox" id="show-menu" role="button"> 
    <ul id="menu"> 
     <li><a href="#" class="top-menu" id="about">About</a></li> 
     <li><a href="#" class="top-menu" id="residential">Residential &amp; Business</a></li> 
     <li><a href="#" class="top-menu" id="myaccountdetails">My Accounts Details</a></li> 
     <li><a href="#" class="top-menu faqs active" id="faq">FAQ</a></li> 
     <li><a href="#" class="top-menu" id="contactus">Contact us</a></li> 
    </ul> 
</nav> 

지금까지 내가이 이 작업해야한다 포럼에 읽은 것과 말할 수 있지만, 창 크기를 조정해도 효과가 없습니다.

이 질문은 정확한 복제본이 아닙니다. 이 게시물은 무엇이 잘못되었는지 물어보고, 다른 게시물은 왜 이런 식으로 물어보고 있습니다.

Answer 1

font-size: medium;은 항상 미디어 쿼리 후에 나타나는대로 적용됩니다. 간단히 다시 주문하세요 스타일 :

nav a { 
    text-decoration: none; 
    display: inline-block; 
    border-bottom: 3px solid transparent; 
    transition: 0.5s ease; 
    white-space: nowrap; 
    height: 20px; 
    color: #171581; 
    padding: 8px 8px 8px 8px; 
    font-family: HelveticaNeue-Thin; 
    font-weight: 100; 
    font-size: medium; 
} 

@media screen and (max-width : 1115px) { 
    /*This is later in the order of styles, so will be applied when the screen is <= 1115px */ 
    nav a { 
     font-size: smaller; 
    } 
} 

https://jsfiddle.net/xo3cq44t/