我是编码的新手，所以请原谅我的简单问题。
我正在尝试在网站中实现媒体查询以使其完全“响应”，尽管遵循了许多教程，但似乎遇到了一个非常基本的问题，这无疑很容易解决，但由于我缺乏经验，这对我来说还是个谜。
本站采用960网格系统搭建，下面是我的媒体查询css页面。
基本上，我可以让媒体查询正常工作，例如当浏览器缩小到 960px 或更小时，网站对媒体查询 css 做出正确 react (页面变为宽度:94% 和左右边距的 3% )，但随着页面继续调整大小，它不是“流动的”并且不遵循浏览器边缘。它基本上保持在 960px，(而不是缩小)直到触发下一个媒体查询(650px)。 Width:auto 似乎不起作用，因为目前媒体查询仅在宽度设置为每种分辨率的百分比或像素等时调整页面大小。
下面是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;
}
最佳答案
它在 Chrome 中似乎对我来说工作正常。我做了一个 Dabblet 的 here
关于css - 媒体查询触发但元素不流动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/9486610/