Html css中的多个媒体查询不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20787107/
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 in css not working
提问by user2798091
I have multiple queries in my stylesheet where the code@media only screen and (min-width : 768px) and (max-width : 1024px) { }works perfectly fine but under it I have @media screen and (min-device-width : 176px) (max-device-width : 360px) {}does not work.
我的样式表中有多个查询，其中代码@media only screen and (min-width : 768px) and (max-width : 1024px) { }工作得很好，但在它之下我@media screen and (min-device-width : 176px) (max-device-width : 360px) {}不起作用。
CSS:
CSS：
@media only screen and (min-width : 768px) and (max-width : 1024px) {
body {background: red; } }
@media screen and (min-device-width : 176px) (max-device-width : 360px) {
body {background: green; } }
回答by Nix
You're missing the ANDbetween (min-device-width : 176px) (max-device-width : 360px).
你错过了AND两者之间(min-device-width : 176px) (max-device-width : 360px).
@media screen and (min-device-width : 176px) and (max-device-width : 360px) {
body {background: green; }
}
The other issues here is you are using min-device-width.(referring to the resolution of the device vs browser width) which is what @NoobEditor is saying below.
这里的另一个问题是您正在使用min-device-width.（指设备的分辨率与浏览器宽度），这就是@NoobEditor 在下面所说的。
Are you doing that on purpose? If not you should be using min-width&& max-width
你是故意的吗？如果不是，你应该使用min-width&&max-width
@media screen and (min-width : 176px) and (max-width : 360px) {
body {background: green; }
}
回答by NoobEditor
check this fiddle, change the browser width to see the the media query in action
检查此小提琴，更改浏览器宽度以查看正在运行的媒体查询
@media screen and (max-width : 1500px) {
body {
background: #000;
border-top: 2px solid #DDDDDD;
}
}
@media screen and (min-width : 768px) and (max-width : 1024px) {
body {
background: #fff;
border-top: 2px solid #DDDDDD;
}
}
This fiddle works fine, but if you change the order of the media queriesit wont work...try it for yourself!
这个小提琴工作正常，但如果您更改媒体查询的顺序，它将无法正常工作...自己尝试一下！
CSS always selects the last style that was declared if multiple style are found for an attrib.
如果为一个属性找到多个样式，CSS 总是选择最后一个声明的样式。
for e.g :
例如：
@media (max-width: 1024px) {
body {
background: black;
}
}
@media (max-width: 768px) {
body {
background: white;
}
}
for 765px( since both m.q cover this width) color selected would be white
对于765px（因为两个 mq 都覆盖这个宽度）选择的颜色将是white
回答by Adriano Resende
For multiple widthfor same style, use ,:
对于width相同样式的多个，请使用,：
@media (max-width: 360px), (max-width: 768px) {
/* style goes here */
}
回答by Fernando Trivi?o
I found the solution. You have to make 2 CSS files, in the first code the first media query and in the second write yout second media query code. I know it is an elegant way to do it but it works.
我找到了解决方案。您必须制作 2 个 CSS 文件，在第一个代码中编写第一个媒体查询，在第二个代码中编写第二个媒体查询代码。我知道这是一种优雅的方式，但它确实有效。
