CSS 无法识别最小宽度媒体查询

Question

我不知道为什么我的 CSS media 查询不能正常工作：

/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {
.bottom-right{margin-top:20%;}
.bottom-right h2{font-size: 0.9em;}
.buttons{font-size: 1.0em;}
} 

/* Medium Devices, Desktops */
@media only screen and (min-width : 993px) {
.solodesktop{display:block;}
.solomobile{display:none;}
.bottom-right{margin-top:10%;}
.bottom-right h2{font-size: 7em;}
.buttons{font-size: 0.8em;}
}

在页面中，.bottom-right class 的 margin-top 属性没有应用 20% 的上边距。

Answer 1

您的媒体查询不够精确，第二个查询从 993px 开始并且没有最大值。限制，这意味着它会覆盖第一个媒体查询。发生这种情况是因为 css 规则是自上而下应用的，它会覆盖您的第一个媒体查询。

要解决这个问题，你可以说：

/* Medium Devices, Desktops */
@media only screen and (min-width: 993px) and (max-width: 1199px) {
.solodesktop{display:block;}
.solomobile{display:none;}
.bottom-right{margin-top:10%;}
.bottom-right h2{font-size: 7em;}
.buttons{font-size: 0.8em;}
}

这是 css 桌子，现在可以使用了 CSS Desk Code

在 993px 以下它有默认的 html 样式，在 993px 和 1199px 之间它有 10% 的边距等等，在 1200px（最小宽度：1200px）它改变边距等等。

Answer 2

您当前的媒体查询顺序导致了问题。

当分叉 min-width 值时，您应该始终将它们按像素值的升序排列。用 min-width: 993px 和 min-width: 1200px 交换位置，它应该运行平滑。

另一个选项是也将 max-width 值设置为媒体查询（参见 Roman 的回答），因此它知道不会干扰下一个查询。 CSS 总是从 顶部到底部 阅读，因此如果您不够具体，最后一条规则会覆盖前面的规则。

CSS 无法识别最小宽度媒体查询

CSS doesn't recognize min-width media query

css

media-queries