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

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

在我的机器上，正在应用第一个媒体查询(最大宽度:1920 像素)的样式。当我在 Firebug 中检查时，它给了我行 # 与第一个媒体查询中的声明一致。

这发生在多个浏览器(Firefox、Chrome)

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

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

我做错了什么？

我已经查找过任何遗漏的括号闭包，但没有找到。我已使用 W3C CSS 验证程序服务进行验证，并检查为正确，未发现任何错误。

Answer 1

问题是你的逻辑。

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

我会建议重新排序并首先从最小、最受限制的查询开始:

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

更好的方法是对所有查询使用最小宽度:

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

    }