2013-03-26 128 views
3

这必须是一个非常愚蠢的问题,但我无法让这个媒体查询工作。当我调整它的大小时,页面不会改变。媒体查询不起作用

stylesheet.css中:

@font-face { 
    font-family: ubuntu; 
    src: url('Ubuntu-L.ttf'); 
} 
@font-face { 
    font-family: ubuntu; 
    src: url("Ubuntu-B.ttf"); 
    font-weight: bold; 
} 

html, body { 
background-image: url('bg2.png'); 
background-repeat: repeat; 
background-attachment: fixed; 
font-family: ubuntu; 
font-size: 48px; 
margin: 0; 
padding: 0; 
text-align: center; 
} 

#menu { 
width:900px; 
height: 150px; 
background: #FFF; 
position: fixed; 
left: 50%; 
margin-left: -450px; 
top: 50px; 
} 


#content { 
width: 800px; 
margin: 0px auto; 
padding-top: 100px; 

} 

.block { 

width: 100%; 
height: 800px; 
margin-top: 100px; 
margin-bottom: 100px; 
border-radius: 5px; 
background: #FFF; 

-moz-box-shadow: 0 0 25px 0px rgba(0,0,0,0.5); 
-webkit-box-shadow: 0 0 25px 0px rgba(0,0,0,0.5); 
box-shadow: 0 0 25px 0px rgba(0,0,0,0.5); 
} 


//MEDIA QUERY 

@media screen and (max-width: 900px) { 

    #content { 
     width: 90%; 
    } 
    #menu { 
     width: 100%; 
     left: 0%; 
     top: 0%; 
     margin-left: 0px; 
    } 

} 

的index.html:

<html> 
<head> 

<link rel="shortcut icon" href="http://www.yellos.com/favi.ico" /> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> 

<title>yellos</title> 

<!--[if lt IE 9]> 
    <script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script> 
<![endif]--> 
<link rel="stylesheet" type="text/css" href="stylesheet.css" /> 

</head> 

<body> 

<div id="menu"> 

... 

</div> 

<div id="content"> 

<div class="block" id="1"> 

TEST 

</div> 

</div> 

</body> 

</html> 

我在做什么错?

+0

? – diEcho 2013-03-26 20:22:12

+0

我在OS X中的Chrome,Firefox和Safari中测试了它。@dystroy,正如我所说的,当我的窗口小于900像素时,没有任何变化。我希望#content更改为90%宽度,并将#menu更改为100%宽度(如您在css中所见),但其大小不会更改。 – Yellos 2013-03-26 20:27:51

回答

6

错误是//评论是不允许在CSS中。

变化

//MEDIA QUERY 

在浏览器和操作系统
/* MEDIA QUERY */ 
+0

啊,谢谢。我现在感到有点惭愧。 – Yellos 2013-03-26 20:37:38

+2

@Yellos不要,这让你感到难以置信的次数。与SQL相同。一切都应该使用''':) – mattytommo 2013-03-26 20:38:09