@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/