這必須是一個非常愚蠢的問題,但我無法讓這個媒體查詢工作。當我調整它的大小時,頁面不會改變。媒體查詢不起作用
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>
我在做什麼錯?
? – diEcho 2013-03-26 20:22:12
我在OS X中的Chrome,Firefox和Safari中測試了它。@dystroy,正如我所說的,當我的窗口小於900像素時,沒有任何變化。我希望#content更改爲90%寬度,並將#menu更改爲100%寬度(如您在css中所見),但其大小不會更改。 – Yellos 2013-03-26 20:27:51