@media不起作用
[英]@media doesn't work
问题描述
I was rewriting the style of my page for smaller screens using media queries : 
我正在使用媒体查询为较小的屏幕重写页面样式：
@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;
}
}
And NOTHING DID WORK AT ALL.. I viewed the webpage through my Dreamweaver CS6 compatibility view and it didn't work so I checked it by resizing my browser window and didn't work too. 根本没有任何工作。.我通过Dreamweaver CS6兼容性视图查看了该网页，但该网页无法正常工作，因此我通过调整浏览器窗口的大小对其进行了检查，但该网页也无法正常工作。 Any ideas why didn't it work ? 任何想法为什么不起作用？ Doesn't it work with IDs ?! 它不能与ID一起使用吗？
3 个解决方案
解决方案1
0 2012-12-28 15:10:14
尝试在您的标头上添加此meta：
<meta name="viewport" content="width=device-width" />
解决方案2
0 2012-12-28 15:47:50
The code posted works as such, so the problem is elsewhere, eg in the rules inside the construct or in using a browser that does not support media queries (that would in practice mean IE 8 or older – otherwise browser support is very good). 发布的代码按这样的方式工作，因此问题出在其他地方，例如，结构内部的规则或使用不支持媒体查询的浏览器（实际上意味着IE 8或更旧版本；否则， 浏览器支持非常好）。
To check out the situation, test first with a minimal document like 要检查情况，请首先使用最小的文档进行测试，例如
<!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
You should also test the style sheet inside the construct by taking it out of, making it unconditional, to see whether it works at all. 您还应该通过将其取出（使其成为无条件的）来测试构造内部的样式表，以查看其是否完全起作用。
解决方案3
0 2016-04-18 21:25:15
This has happened to me, too, on Chrome and Firefox. 在Chrome和Firefox上，这也发生在我身上。
I found that the problem arises when the default visibility is set to hidden or display to none (the visibility of the elements affected by css was controlled by js). 我发现，当默认问题出现了visibility设置为hidden或display到none （受CSS的元素的可见性是由JS控制）。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.