Html @ media 屏幕 CSS 不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/20780784/
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
@ media Screen CSS not working
提问by user2798091
I have added the following code to my style.css file in my wordpress theme but it doesn't work. I want the body background to change for screen widths between 768 and 1024px
我已将以下代码添加到我的 wordpress 主题中的 style.css 文件中，但它不起作用。我希望正文背景在 768 到 1024 像素之间的屏幕宽度上发生变化
CSS:
CSS：
@media screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
{
body {
background: #fff;
border-top: 2px solid #DDDDDD;
}
}
回答by NoobEditor
You might have an issues with the order of the media query in which you mentioned the styles
您可能对提到样式的媒体查询的顺序有问题
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 Andrii
One of possible solutions is including
可能的解决方案之一是包括
<meta name="viewport" content="width=device-width, initial-scale=1.0">
To headtag
为了head标签
回答by Bugaloo
try
尝试
@media only screen and (min-width: 768px) and (max-width: 1024px) {
}
