Question

我有点困惑

在主页的顶部，我有一个徽标，可以根据屏幕宽度进行精确调整，并保持定位

右边我有导航栏（bootstrap）

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

nav.navbar.navbar-default

等等

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

我设置了nav.navbar.navbar-default＆＃39; font-size to 0.8em

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

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

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

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

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

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

你能否暗示如何进行这种设置

屏幕宽度 - ＆gt;字体大小

大于1024 - ＆gt; 1.0em

小于1024主要而不是768 - ＆gt; 0.8em

小于768/767（或者引导程序切换到移动菜单） - ＆gt; 1em的

谢谢你的帮助： - ）

Answer 1

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