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 

该代码根本不适用于 1366px 和 1280px x 600px 屏幕。1280px x 960px 适用于 1366px 的代码。1280px x 1024 适用于 1440px 的代码。有人可以帮忙吗？谢谢！

Answer 1

您不需要在媒体查询上设置 maxwidth，因为下一个媒体查询会覆盖它。尝试这个：

#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 */
}

这个东西会特别指出应该应用哪些样式。