当屏幕尺寸小于MQ时，媒体查询将覆盖默认CSS

Question

我不知道自己在做什么错，这可能是愚蠢的。但是我有一个徽标，正在尝试根据屏幕尺寸调整大小。但是由于某种原因，默认（移动）样式没有生效，而是使用了媒体查询样式作为下一个尺寸（垂直于平板电脑）。尽管屏幕尺寸小于平板电脑尺寸。

我正在使用Google Chrome浏览器的检查器来查找断点。

这就是我所拥有的：

h1.logo {font-size: 2em;}

@media only screen and (min-width: 768px) {
  h1.logo {font-size: 1.25em;}
}

@media only screen and (min-width: 1130px) {
  h1.logo {font-size: 1.2em;}
}

由于某种原因，当1.25em大小相反时，它会超过2em大小。即使我的屏幕宽度小于768px。

Answer 1

在这种情况下，min-width将始终否决2em font-size属性，因为这是您要应用样式的初始屏幕尺寸。

在您的示例中，您说的是从768px以上开始（最小宽度），h1.logo font-size属性应为1.25em。

如果您希望将h1.logo font-size减小到768px屏幕尺寸以下的1.25em，则应使用max-width，这样您就可以说起始于768px及以下

我制作了CodePen，以便您更好地理解它：https://codepen.io/hk95/pen/xoqWqe

希望这可以为您提供帮助，如果您有任何疑问，请告诉我！ 祝你有美好的一天。