Question

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

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>

我做错了什么？

Answer 1

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

更改

//MEDIA QUERY

到

/* MEDIA QUERY */

媒体查询无效

1 个答案: