无法更改@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的字体大小

回答

相关问题