無法更改@media的字體大小

我試圖讓瀏覽器窗口變小時減小字體大小的菜單。下面是我得到了什麼：無法更改@media的字體大小

的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>

至於我可以從我讀過這個應該合作論壇上說，但當我調整窗口大小時，沒有任何效果。

此問題並非完全重複。這篇文章是問是什麼錯，另一篇文章是問爲什麼這樣。

來源

2016-05-31 Charles Angerstein

你嘗試把@media塊中的原始風格塊之後？ – Quantastical

它的父元素的字體大小是什麼？它是否設置？這可能會影響到你。退房：https：//css-tricks.com/almanac/properties/f/font-size/ –

顯然你做。謝謝你。 –

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/

來源

2016-05-31 16:52:52

無法更改@media的字體大小

回答

相關問題