2

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

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

4

3 回答 3

1

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

<meta name="viewport" content="width=device-width" />
于 2012-12-28T15:10:14.680 回答
0

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

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

<!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

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

于 2012-12-28T15:47:50.370 回答
0

这也发生在我身上，在 Chrome 和 Firefox 上。

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

于 2016-04-18T21:25:15.107 回答