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

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的代码。有谁能帮忙吗？谢谢！

- platzchen

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

- Adrian Roworth

---

我已经尝试过这个方法，对我来说很有效！我在三台不同分辨率的电脑上进行了测试，它们都可以正常工作。但是我的客户说他无法使用，即使他的屏幕分辨率与我的相同。我想我必须找到另一个解决方案。非常感谢您的回复！ - platzchen

Answer 2

与其使用

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

不同的媒体查询使用方法如下：

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

这个东西会明确指出哪个限制应该应用哪些样式。

- abhishek