CSS 针对不同屏幕尺寸的多个媒体查询
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19768767/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Multiple media queries for different screen sizes
提问by platzchen
I'm trying to set different image sizes according to the screen resolution, some of them work and some don't. Here's my Code:
我正在尝试根据屏幕分辨率设置不同的图像大小，其中一些有效，一些无效。这是我的代码：
@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
The code is not working at all for the 1366px and 1280px x 600px screen. 1280px x 960px works with the code for the 1366px. 1280px x 1024 works with the code for the 1440px. Can anybody please help? Thank you!
该代码对于 1366px 和 1280px x 600px 屏幕根本不起作用。1280px x 960px 适用于 1366px 的代码。1280px x 1024 适用于 1440px 的代码。有人可以帮忙吗？谢谢！
回答by Adrian Roworth
you don't need to set a maxwidth on your media queries as the next media query overrides it anyway. Try this:
您不需要在媒体查询上设置 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;}
}
回答by abhishek
Instead of using
而不是使用
@media screen and (min-width: 1366px) {
/* Styles go here */
}
Use media query differently like
以不同的方式使用媒体查询，例如
@media (max-width: 1366px) and (min-width: 1441px) {
/* Styles go here */
}
this thing will specifically call out in which limit which styles should be applied.
这件事会特别指出应该在哪个限制中应用哪些样式。
