无法使用@media 更改字体大小

Question

我正在尝试创建一个随着浏览器 window 变小而减小字体大小的菜单。这是我得到的：

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>

据我所知，我在论坛上看到的应该可以工作，但是当我调整 window 的大小时没有任何效果。

这个问题不是完全重复的。这个post是问怎么了，另一个post是问为什么会这样。

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/

无法使用@media 更改字体大小

Unable to change font size with @media

css

font-size

media-queries