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

【问题标题】：Default CSS being overridden by media query when screen size is less than MQ当屏幕尺寸小于 MQ 时，默认 CSS 被媒体查询覆盖
【发布时间】：2019-06-22 04:08:15
【问题描述】：

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

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

这是我所拥有的：

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。

【问题讨论】：

尝试使用max-width 我总是把这两个混在一起：D
min-width: 768px 表示从768px 及以上，因此除非视口大于或等于768px，否则不会生效
@ZohirSalak，是的，我知道。它不应该影响低于 768px 的任何东西。但在 768 像素以下的屏幕尺寸下，H1 应用的是 1.25em 而不是 2em。
使用重现问题的代码 sn-p 编辑您的问题

标签： css media-queries

【解决方案1】：

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

在您的示例中，您是说 STARTING AT 768px & ABOVE（最小宽度），h1.logo font-size 属性应该是 1.25em。

如果您希望 h1.logo font-size 减小到 768px 屏幕尺寸以下 1.25em，您应该使用 max-width，因此您会说 STARTING AT 768px & BELOW。

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

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

【讨论】：

好的，这就是我所做的。但这仍然行不通。我正在尝试首先为移动设备构建。默认属性应该是我开始使用并使用媒体查询覆盖的属性。这不是我第一次这样做。但由于某种原因，我只是没有做对！ >@media only screen and (max-width: 767px) { 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;} } `
别担心，杰夫。我会尝试在我的 CodePen 中复制您的评论。
在这里，它不允许我编辑它。 fiddle
我的意思是，根据我的理解和你发给我的信息，font-size: 2em 被应用从 0px 到 767px，然后，font-size: 1.25em 从 768px 到 1129px 和 font-size: 1.2em 从 1130px 及以上。所以，只是为了让我理解，它有什么问题？
问题在于，在 0-767 的尺寸范围内，它无法识别 2em。相反，它只是忽略该行并应用 1.25em 的 768+ 之一。如果我的代码有问题，我需要在继续之前知道。