媒体查询未按预期更改答案

【问题标题】：Media queries not changing as intended媒体查询未按预期更改
【发布时间】：2019-01-10 17:57:13
【问题描述】：

我正在使用媒体查询来控制某些元素的 'margin-top' 和 'zoom' CSS 属性，但由于某种原因它没有按预期工作。

这些是我的 CSS 媒体查询：

/* (1440x900) WXGA+ Display */
@media  screen and (max-width: 1440px) {
    .multipleVendors {
        zoom: 0.85;
    }
    .searcher {
        zoom: 0.90;
        margin-top:100px;
    }
}


/* (1920x1080) Full HD Display */
@media  screen and (max-width: 1920px) {
    .multipleVendors {
        zoom: 0.85;
    }
    .searcher {
        zoom: 0.90;
        margin-top:150px;
    }
}

我当前的屏幕分辨率为 1920x1080 并且效果很好（使用自定义 CSS 查询），但是当我将屏幕分辨率更改为 1440x900 时，它会忽略我的自定义 CSS 查询并仍然使用 1920x1080 的查询。

知道如何解决这个问题吗？我错过了什么？

谢谢

【问题讨论】：

标签： css

【解决方案1】：

由于 CSS 的级联特性，第二个媒体查询覆盖了第一个。如果您只是更改声明的顺序，它应该可以工作。

/* (1920x1080) Full HD Display */
@media  screen and (max-width: 1920px) {
    .multipleVendors {
        zoom: 0.85;
    }
    .searcher {
        zoom: 0.90;
        margin-top:150px;
    }
} 

/* (1440x900) WXGA+ Display */
@media  screen and (max-width: 1440px) {
    .multipleVendors {
        zoom: 0.85;
    }
    .searcher {
        zoom: 0.90;
        margin-top:100px;
    }
}

【讨论】：

【解决方案2】：

您可以在某个范围内提及它，而不是只给出最大宽度。它将有助于为特定设备创建网页，并且不会覆盖您的样式。

  /* (1440x900) WXGA+ Display */
@media  screen (min-width: 1200px) and (max-width: 1440px) {
    .multipleVendors {
        zoom: 0.85;
    }
    .searcher {
        zoom: 0.90;
        margin-top:100px;
    }
}


/* (1920x1080) Full HD Display */
@media  screen (min-width: 1441px)and (max-width: 1920px) {
    .multipleVendors {
        zoom: 0.85;
    }
    .searcher {
        zoom: 0.90;
        margin-top:150px;
    }
}

【讨论】：