针对不同屏幕尺寸的多个媒体查询

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 

对于1366px和1280px x 600px屏幕，代码根本不起作用。 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;}
}

Answer 2

而不是使用

@media screen and (min-width: 1366px) {
/* Styles go here */
}

使用与

不同的媒体查询

@media (max-width: 1366px) and (min-width: 1441px) {
/* Styles go here */
}

这件事将特别指出应该应用哪些样式的限制。