无法使用@media 更改字体大小 [重复]答案

【问题标题】：Unable to change font size with @media [duplicate]无法使用@media 更改字体大小 [重复]
【发布时间】：2016-09-29 19:19:53
【问题描述】：

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

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>

据我在论坛上阅读的内容，这应该可以工作，但是当我调整窗口大小时没有效果。

这个问题不是完全重复的。这篇文章在问什么问题，另一篇文章在问为什么会这样。

【问题讨论】：

您是否尝试将@media 块放在原始样式块之后？
其父元素的字体大小是多少？设置好了吗？那可能会影响你。签出：css-tricks.com/almanac/properties/f/font-size
显然你知道。谢谢你。
响应您的编辑，重复的帖子回答了出了什么问题和为什么会这样。你的问题是完全重复的。但如果您不同意，您可以在下方发表评论并投票重新开放。
无需重新打开。现在这个问题得到了回答。只需按照页面上的说明编辑我的问题并解释为什么如果我觉得它不是重复的，那么我就这样做了。虽然另一个问题可能得出相同的结论，但我认为它不是重复的原因是标题询问的是我在查找时不会（没有）找到的东西。询问为什么某事是一种方式并不能帮助那些试图确定某事有什么问题的人。

标签： css media-queries font-size

【解决方案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/

【讨论】：