Question

我在这里看过类似的问题并没有找到合适的答案，所以请原谅我这个问题最初可能会出现在其他人的副本中。

我的屏幕分辨率是1366px宽

我有样式表的默认样式，然后是几个媒体查询，按以下顺序排列：

@media only screen and (max-width:1920px) {
}

@media only screen and (max-width:1680px), only screen and (max-device-width: 1680px)  {
}

@media only screen and (max-width:1280px), only screen and (max-device-width: 1280px)  {
}

@media only screen and (max-width:1024px), only screen and (max-device-width: 1024px)  {
}

@media only screen and (max-width: 800px), only screen and (max-device-width: 800px) {
}

@media screen and (min-device-width: 768px) and (max-device-width: 1024px){
}

在我的机器上，正在应用第一个媒体查询（最大宽度：1920px）的样式。当我在Firebug中检查时，它给出了与第一个媒体查询中的声明一致的行＃。

这种情况发生在多个浏览器（Firefox，Chrome）

上

但是，我的视口只有1366像素宽 - 所以，我希望最大宽度：1280像素或最大宽度：1680像素匹配，而不是1920像素。

当我调整为1024x768或800x600时，会应用正确的媒体查询样式。

我做错了什么？

我已经找到了任何缺少的括号闭包，但没有找到。我已经验证了使用W3C CSS验证器服务，并检查为正确，没有发现错误。

Answer 1

问题在于你的逻辑。

您的第一个查询指出max-width：1920px。实际上，因为您的桌面是1366px，它小于1920px，所以它是一个有效的查询。在你的1680px之后考虑这个问题。

我建议首先重新排序并从最小，最具约束力的查询开始：

__genus

更好的方法是对所有查询使用min-width：

@media screen and (min-device-width: 768px) and (max-device-width: 1024px){
}

@media only screen and (max-width: 800px), only screen and (max-device-width: 800px) {
}

@media only screen and (max-width:1024px), only screen and (max-device-width: 1024px)  {
}

@media only screen and (max-width:1280px), only screen and (max-device-width: 1280px)  {
}

@media only screen and (max-width:1680px), only screen and (max-device-width: 1680px)  {
}

@media only screen and (max-width:1920px) {
}

作为最佳实践，这里是Bootstraps查询：

@media screen and (min-device-width: 768px) and (max-device-width: 1024px){
}

@media only screen and (min-width: 800px), only screen and (min-device-width: 800px) {
}

@media only screen and (min-width:1024px), only screen and (min-device-width: 1024px)  {
}

@media only screen and (min-width:1280px), only screen and (min-device-width: 1280px)  {
}

@media only screen and (min-width:1680px), only screen and (min-device-width: 1680px)  {
}

@media only screen and (min-width:1920px) {
}

Answer 2

您想使用min-width而不是max-width。由于您的查询适用于1920px宽的任何屏幕，因此当您的屏幕不大于1366px宽时，它始终会被应用。 max-width == <=，min-width == >=。

/* apply these selectors when the width is equal to or greater than 1920px */
@media only screen and (min-width:1920px) {
}

不匹配的媒体查询覆盖默认样式

2 个答案: