Question

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

@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吗？！

Answer 1

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

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

Answer 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

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

Answer 3

在Chrome和Firefox上也发生过这种情况。

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

@media不起作用

3 个答案: