@media 不起作用答案

【问题标题】：@media doesn't work@media 不起作用
【发布时间】：2016-04-19 09:33:59
【问题描述】：

我正在使用媒体查询为较小的屏幕重写页面样式：

@media only screen 
and (min-width : 400px) 
and (max-width : 1024px) {
#container {
right:10px;
top:50px;
font-size:24px;
position:absolute;
min-height: 85%;
margin-left:auto;
width:100px;
}   
#portfolio {
width:100px;
min-height:550px;
-webkit-box-shadow:  0px 2px 10px 4px rgba(9, 9, 9, 0.2);
box-shadow:  0px 2px 10px 4px rgba(9, 9, 9, 0.2);
-webkit-border-radius: 10px;
border-radius: 10px;}
#whoami {
width:100px;
min-height:550px;
-webkit-box-shadow:  0px 2px 10px 4px rgba(9, 9, 9, 0.2);
box-shadow:  0px 2px 10px 4px rgba(9, 9, 9, 0.2);
-webkit-border-radius: 10px;
border-radius: 10px;    }
#blog {
width:100px;
min-height:550px;
-webkit-box-shadow:  0px 2px 10px 4px rgba(9, 9, 9, 0.2);
box-shadow:  0px 2px 10px 4px rgba(9, 9, 9, 0.2);
-webkit-border-radius: 10px;
border-radius: 10px;    
}
#contact {
width:100px;
min-height:550px;
-webkit-box-shadow:  0px 2px 10px 4px rgba(9, 9, 9, 0.2);
box-shadow:  0px 2px 10px 4px rgba(9, 9, 9, 0.2);
-webkit-border-radius: 10px;
border-radius: 10px;
}

}

而且根本没有任何效果.. 我通过 Dreamweaver CS6 兼容性视图查看了该网页，但它不起作用，因此我通过调整浏览器窗口大小来检查它，但也没有用。任何想法为什么它不起作用？它不适用于 ID 吗？！

【问题讨论】：

你在小屏幕上试过了吗？
您需要显示更多代码或链接到问题页面。
我已经编辑了问题并输入了整个@media 代码。
那么问题出在哪里？这样的样式表什么都不做。如果你添加一个像<div id="portfolio" style="border:solid">Some text</div> 这样的元素，你会看到它的渲染会随着浏览器窗口宽度的变化而变化。
但是宽度没有改变，它的宽度在普通样式表中设置为“650px”，所以当我改变浏览器窗口时它应该将它的宽度更改为100px，这不会发生

标签： css media-queries

【解决方案1】：

尝试在您的标题中添加此元数据：

<meta name="viewport" content="width=device-width" />

【讨论】：

【解决方案2】：

发布的代码就是这样工作的，所以问题出在其他地方，例如在构造内部的规则中或在使用不支持媒体查询的浏览器中（这实际上意味着 IE 8 或更早版本 - 否则 browser support 非常好）。

要检查情况，请先使用最小文档进行测试，例如

<!doctype html>
<title>Testing media queries</title>
<style>
@media only screen 
and (min-width : 768px) 
and (max-width : 1024px) {
  body { background: green; }
}
</style>
Hello world

您还应该测试构造内部的样式表，将其取出，使其成为无条件的，以查看它是否完全有效。

【讨论】：

我已经编辑了问题并输入了整个@media 代码。而且我已经尝试了您的示例并且它有效！顺便说一句，我正在使用 chrome，我认为这个星球上没有人仍在使用 IE8 :D
如果你认为没有人使用 IE8，那你就半途而废了。这是您的代码工作（请调整您的浏览器大小以查看无样式与样式代码）：jsfiddle.net/ryanwheale/3PPdh
当然我知道我只是在开玩笑，IE 仍然被广大无知的互联网用户所使用，他们认为只有 IE 才能访问互联网......例如中国

【解决方案3】：

我在 Chrome 和 Firefox 上也遇到过这种情况。

我发现当默认visibility设置为hidden或display设置为none时出现问题（受css影响的元素的可见性由js控制）。

【讨论】：