@media不工作
@media不工作
提问于 2012-12-28 22:45:30
我使用媒体查询为小屏幕重写了我的页面样式：
@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一起工作吗?！
回答 3
Stack Overflow用户
发布于 2012-12-28 23:10:15
尝试在您的标题中添加此元：
<meta name="viewport" content="width=device-width" />Stack Overflow用户
发布于 2012-12-28 23:47:50
发布的代码就是这样工作的，所以问题出在其他地方，例如，在构造内部的规则中，或者在使用不支持媒体查询的浏览器时(这实际上意味着IE8或更早的版本-否则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您还应该在结构中测试样式表，方法是将其从构造中取出，使其成为无条件的，以查看它是否工作。
Stack Overflow用户
发布于 2016-04-19 05:25:15
在Chrome和Firefox上，我也遇到过这种情况。
我发现当默认的visibility设置为hidden或display设置为none (受css影响的元素的可见性由js控制)时，问题就出现了。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/14071227
复制相关文章
相似问题
腾讯云开发者
