我对编码很陌生，所以请原谅我希望简单的问题。
我正在尝试将媒体查询实施到一个网站，以使其完全'响应'，尽管后面的许多教程似乎有一个非常基本的问题，毫无疑问很容易解决，但由于我的经验不足，这对我来说是一个谜。 / p>
该网站是使用960网格系统构建的，下面你可以找到我的媒体查询css页面。
基本上，我可以让媒体查询起作用，例如当浏览器减少到960px或更低时，网站会对媒体查询css做出正确反应（页面变为宽度：94％和左右边距3％）但随着页面继续调整大小，它不是“流畅的”并且不遵循浏览器边缘。它基本上保持在960px（而不是按比例缩小），直到触发下一个媒体查询（650px）。宽度：自动似乎无法正常工作，因为当前媒体查询仅在每个分辨率的宽度设置为百分比或像素等时调整页面大小。
下面是css和html，再次请原谅我的新手编码，这是我的第一个网站。
非常感谢=]
@media screen and (max-width: 960px) {
.container_12 {
width: 94%;
margin: 0 3% 0 3% ;}
#header {
width: 100%;}
.grid_10 alpha omega {
width:78%;}
}
@media screen and (max-width: 650px) {
#header {
width: auto;}
.grid_10 alpha omega {
width: auto;}
}
@media screen and (max-width: 480px) {
#header {
width: auto;}
.grid_10 alpha omega {
width: auto;}
}
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta name="viewport" content="width=device-width" />
<title>title</title>
<link href='http://fonts.googleapis.com/css?family=Quicksand:400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="reset.css" />
<link rel="stylesheet" type="text/css" href="960.css" />
<link rel="stylesheet" type="text/css" href="styles.css" />
<link rel="stylesheet" type="text/css" href="media-queries.css" />
</head>
<body>
<div class="container_12" id="container">
<div id="header">
<div class="grid_2 alpha" id="logo">
<h1><a href="/">Home</a></h1></div>
<div class="grid_3 omega" id="navigation">
<ul class="navigation">
<li><a href="/menu1/">menu 1</a></li>
<li><a href="/menu2/">menu 2</a></li>
</ul>
</div>
</div>
<div class="grid_10 alpha omega" id="maincontent">
<h2>hello<a href="/menu1.html" class="h2bold"> world.</a> Lorem Ipsum.</h2>
<p>Lorem Ipsum.<br>
Lorem Ipsum.</p>
</div>
</div>
</body>
<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
</html>
更新：这是我的主要styles.css，因为似乎无法用我提供的内容复制问题。
@charset "utf-8";
/* CSS Document */
/***************** Page Styles ***************/
body {
background-color:#deeee9;
}
.container_12 {
background-color:#fefefe;
}
p {
font-family:Verdana, Geneva, sans-serif;
font-size:10px;
line-height: 18px;
}
p a:link {
text-decoration:none;
font-weight:bold;
color:#000000;
}
p a:hover {
text-decoration:none;
font-weight:bold;
color:#fa5e45;
}
p a:visited {
text-decoration:none;
font-weight:bold;
color:#333;
}
h2 {
padding: 120px 0 13px 0;
font-size:23px;
font-family: 'Quicksand', sans-serif;
letter-spacing: -1px;
font-weight:100;
}
h3 {
padding: 0 0 3px 0;
font-size:19px;
font-family: 'Quicksand', sans-serif;
letter-spacing: -1px;
font-weight:100;
}
h2 a:link {
font-family: 'Quicksand', sans-serif;
color:#000000;
text-decoration:none;
font-weight:bold;
}
h2 a:hover {
font-family: 'Quicksand', sans-serif;
color:#fa5e45;
text-decoration:none;
}
/****************************** Header ********************************/
#header {
height: 100px;
margin-bottom: 120px;
border-bottom: 1px dashed;
}
#logo {
text-indent:-9999px;
}
#logo a {
display: block;
margin-top:15px;
border: none;
background: transparent url(images/logo.png) no-repeat;
width: 76px;
height: 76px;
border-image: initial;
}
#navigation {
float:right;
}
.navigation {
margin: 0;
padding: 0;
list-style-type: none;
float: right;
}
.navigation li {
margin: 0;
padding: 0;
display: inline;
float: left;
}
.navigation a:link {
text-decoration:none;
color: #000000;
}
.navigation a:hover {
text-decoration:none;
color: #fa5e45;
}
.navigation a {
margin-top: 30px;
width: 100px;
height: 47px;
border: none;
line-height: 47px;
float: right;
font-family: 'Quicksand', sans-serif;
letter-spacing: 1px;
text-transform: uppercase;
font-size: 14px;
text-align: right;
text-decoration: none;
}
/**************************** Homepage ******************************/
#maincontent p {
font-family: 'Quicksand', sans-serif;
font-size:19px;
line-height: 24px;
letter-spacing: -1px;
}
#maincontent p a:link {
font-family: 'Quicksand', sans-serif;
color:#000000;
text-decoration:none;
font-weight:bold;
}
#maincontent p a:hover {
font-family: 'Quicksand', sans-serif;
color:#fa5e45;
text-decoration:none;
}
/**************************** menu 1******************************/
.workwrapper {
display:block;
clear:both;
}
.workwrapper p{
padding-top:13px;
}
.workurl {
font-family:Verdana, Geneva, sans-serif;
font-size:10px;
}
.workurl a{
font-family:Verdana, Geneva, sans-serif;
font-size:10px;
font-weight: bold;
text-decoration:none;
color:#fa5e45;
}
.workurlnull {
font-family:Verdana, Geneva, sans-serif;
font-size:10px;
}
.workurlnull a{
font-family:Verdana, Geneva, sans-serif;
font-size:10px;
font-weight: bold;
text-decoration:none;
color:#999;
}
.workexample {
float:right;
}
.image {
padding-bottom: 40px;
position:relative;
float:right;
text-align:right;
}
/**************************** menu2 ******************************/
.multicolumn1 {
-moz-column-count:2; /* Firefox */
-webkit-column-count:2; /* Safari and Chrome */
column-count:;
}
.aboutimg {
padding-top: 30px;
}
#aboutimg2 {
padding: 30px 4px 0 4px;
}