媒体查询：在缩小桌面时缩小导航字体大小，而在移动设备中放大答案

【问题标题】：Media Queries: shrink nav font size in shrinking desktops while enlarge it in mobile媒体查询：在缩小桌面时缩小导航字体大小，而在移动设备中放大
【发布时间】：2014-03-27 00:03:05
【问题描述】：

我有点困惑

在主页顶部，我有一个徽标，可以根据屏幕宽度调整大小，并且它位于左侧

在右边我有导航栏（引导）

在缩小页面的同时，我设置的各种媒体查询都按预期工作，因为我的自定义 CSS 覆盖了

nav.navbar.navbar-default

等等

@media only screen and (max-width: 1024px)

我将 nav.navbar.navbar-default' 字体大小设置为 0.8em

但这给我带来了一种行为：当菜单切换到移动版本时，导航栏字体大小显然保持为 0.8em，正如我上面设置的媒体查询规则所述。

问题是：在移动媒体查询大小时如何将字体大小再次增加到 1em？

我很困惑，因为，例如，我试过这个

@media only screen and (max-width: 767px) {
nav.navbar.navbar-default {
font-size: 1em;}
}

但它会覆盖之前的阈值，并且导航栏字体大小也会回到 1em，它之前在 0.8 处正确显示

显然我错过了一些关于媒体查询的知识:-)

能否请您提示一下如何进行这种设置

屏幕宽度 --> 字体大小

大于 1024 --> 1.0em

小于 1024 大于 768 --> 0.8em

再次小于 768/767（或引导程序切换到移动菜单的位置） --> 1em

感谢您的帮助:-)

【问题讨论】：

标签： media-queries

【解决方案1】：

由于 CSS 的本质，后一个媒体查询将覆盖前一个。您需要在查询中包含最小和最大宽度，或者为移动菜单查找/添加类名并使用它来绘制字体大小规则。

【讨论】：