css - 针对不同屏幕尺寸的多种媒体查询

Question

我正在尝试根据屏幕分辨率设置不同的图像大小，其中一些有效，一些无效。这是我的代码:

@media screen and (max-width: 1280px) {#gallery-1 img {width:375px;}} // for 1280px screens 
@media screen and (min-width: 1366px) and (max-width: 1439px){#gallery-1 img {width:375px;}} // for 1366px screens 
@media screen and (min-width: 1440px) and (max-width: 1599px) {#gallery-1 img {width:428px;}} // for 1440px screens 
@media screen and (min-width: 1600px) and (max-width: 1919px) {#gallery-1 img {width:434px;}} // for 1600px screens 
@media screen and (min-width: 1920px) {#gallery-1 img {width:540px;}} // for 1920px screens 

对于 1366 像素和 1280 像素 x 600 像素的屏幕，代码根本不起作用。 1280px x 960px 适用于 1366px 的代码。 1280px x 1024 适用于 1440px 的代码。有人可以帮忙吗？谢谢!

Answer 1

您不需要在媒体查询上设置最大宽度，因为下一个媒体查询无论如何都会覆盖它。试试这个:

#gallery-1 img {
    width:375px;
}
@media screen and (min-width: 1366px) {
    #gallery-1 img {width:375px;}
}
@media screen and (min-width: 1440px) {
    #gallery-1 img {width:428px;}
}
@media screen and (min-width: 1600px) {
    #gallery-1 img {width:434px;}
}
@media screen and (min-width: 1920px) {
    #gallery-1 img {width:540px;}
}