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

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）中都存在

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

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

我做错了什么？

我查找了任何缺失的括号闭包并找到了 none。我已经使用 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，所以它是一个有效的查询。在您的 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) {

    }

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

Non-matching media query overriding default styles

css

media-queries