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

Question

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

我正在使用谷歌浏览器的断点检查器。

这是我所拥有的:

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 的大小，而本应相反。即使我的屏幕宽度小于 768 像素。

Answer 1

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

在您的示例中，您说的是开始于 768px 及以上(最小宽度)，h1.logo font-size 属性应为 1.25em.

如果您希望 h1.logo font-size 减小到 768px 屏幕尺寸以下的 1.25em，您应该使用 max-width，所以您会说 从 768 像素及以下开始。

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

希望对您有所帮助，如果您有任何疑问，请告诉我!祝你有美好的一天。