2013-03-26 156 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