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

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）上

但是，我的视口只有 1366px 宽 - 所以，我希望 max-width:1280px 或 max-width:1680px 匹配，而不是 1920px。

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

我做错了什么？

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

Answer 1

您想使用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) {
}

Answer 2

问题在于你的逻辑。

您的第一个查询声明最大宽度：1920 像素。事实上，因为你的桌面是 1366px，它小于 1920px，所以它是一个有效的查询。在您的 1680 像素之后，请考虑这是一个问题。

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

@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) {
}

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

@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) {
}

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

/*==================================================
=            Bootstrap 3 Media Queries             =
==================================================*/




    /*==========  Mobile First Method  ==========*/

    /* Custom, iPhone Retina */ 
    @media only screen and (min-width : 320px) {

    }

    /* Extra Small Devices, Phones */ 
    @media only screen and (min-width : 480px) {

    }

    /* Small Devices, Tablets */
    @media only screen and (min-width : 768px) {

    }

    /* Medium Devices, Desktops */
    @media only screen and (min-width : 992px) {

    }

    /* Large Devices, Wide Screens */
    @media only screen and (min-width : 1200px) {

    }



    /*==========  Non-Mobile First Method  ==========*/

    /* Large Devices, Wide Screens */
    @media only screen and (max-width : 1200px) {

    }

    /* Medium Devices, Desktops */
    @media only screen and (max-width : 992px) {

    }

    /* Small Devices, Tablets */
    @media only screen and (max-width : 768px) {

    }

    /* Extra Small Devices, Phones */ 
    @media only screen and (max-width : 480px) {

    }

    /* Custom, iPhone Retina */ 
    @media only screen and (max-width : 320px) {

    }