Question

我正在使用媒体查询来控制某些元素的'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。

任何想法如何解决此问题？我想念什么？

谢谢

Answer 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;
    }
}

Answer 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;
    }
}

媒体查询未按预期更改

2 个答案: