媒体查询无法调整大小

我在寻找一些关于媒体查询的帮助。这是我第一次在网站上使用它，但似乎并不奏效。这也是我第一次将我的html4代码改为html5，不确定这是否是问题所在。媒体查询无法调整大小

我的HTML代码：

<!doctype html> <!-- html5 doctype --> 
<html> 
<head> 
<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- line added to for responsive layout --> 
<title>Dummy Site</title> 
<link href="style5.css" rel="stylesheet" type="text/css"> 
</head> 
<body> 
<div id="maincontainer"> 
    <div id="wrapper"> 
     <header></header> 
     <div id="spacer1"></div> 
     <div id="banner"></div> 
     <div id="range"></div> 
     <div id="spacer2"></div> 
     <div id="cols"></div> 
     <div id="spacer3"></div> 
     <footer></footer> 
    </div> 
</div> 
</body> 
</html>

我的CSS：

body { 
    margin:0 auto; 
    background:#f5f3ef; 
} 

a { 
    font-family: 'Arial'; 
    font-size: 12px; 
    color: #66308f; 
    text-decoration:none; 
    font-weight:bold; 
    } 

#container { 
    margin: 0 auto; 
    height: 1264px; 
    width: 100%; 
} 

#wrapper { 
    margin: 0 auto; 
    height: 1264px; 
    width: 893px; 
    background-color:#0CF; 
} 

header { 
    margin:0 auto; 
    height: 171px; 
    width: 883px; 
} 

#spacer1 { 
    height:59px; 
} 

#banner { 
    margin:0 auto; 
    width: 883px; 
    height: 439px; 
    background:url(z_imgs/banner.jpg) no-repeat; 
} 

#range { 
    margin: 0 auto; 
    height: 246px; 
    width: 883px; 
} 

#spacer2 { 
    height:24px; 
} 

#cols { 
    margin: 0 auto; 
    height:188px; 
    width:883px; 
} 

#spacer3 { 
    height:39px; 
} 

footer { 
    margin: 0 auto; 
    height:98px; 
    width:883px; 
} 

<!-- MEDIA QUERIES --> 
@media (max-width: 850px) { 
    #wrapper { 
     background-color: red; 
    } 
}

当我调整浏览器下方850像素的颜色仍然是一样的，并不会更改为红色。

来源

2015-09-02 Michael Owen

喜迈克尔。你会考虑接受下面的答案吗？为此，请单击答案左侧的刻度线，以便将问题标记为已解决。谢谢！ – halfer

，因为你正在使用HTML它不工作的意见内导致语法错误和浏览器无法识别代码CSS代码。删除评论或将其从修改为/* */，它的工作原理。

body { 
 
    margin: 0 auto; 
 
    background: #f5f3ef; 
 
} 
 
a { 
 
    font-family: 'Arial'; 
 
    font-size: 12px; 
 
    color: #66308f; 
 
    text-decoration: none; 
 
    font-weight: bold; 
 
} 
 
#container { 
 
    margin: 0 auto; 
 
    height: 1264px; 
 
    width: 100%; 
 
} 
 
#wrapper { 
 
    margin: 0 auto; 
 
    height: 1264px; 
 
    width: 893px; 
 
    background-color: #0CF; 
 
} 
 
header { 
 
    margin: 0 auto; 
 
    height: 171px; 
 
    width: 883px; 
 
} 
 
#spacer1 { 
 
    height: 59px; 
 
} 
 
#banner { 
 
    margin: 0 auto; 
 
    width: 883px; 
 
    height: 439px; 
 
    background: url(z_imgs/banner.jpg) no-repeat; 
 
} 
 
#range { 
 
    margin: 0 auto; 
 
    height: 246px; 
 
    width: 883px; 
 
} 
 
#spacer2 { 
 
    height: 24px; 
 
} 
 
#cols { 
 
    margin: 0 auto; 
 
    height: 188px; 
 
    width: 883px; 
 
} 
 
#spacer3 { 
 
    height: 39px; 
 
} 
 
footer { 
 
    margin: 0 auto; 
 
    height: 98px; 
 
    width: 883px; 
 
} 
 

 
/* Media Queries */ 
 
@media (max-width: 850px) { 
 
    #wrapper { 
 
    background-color: red; 
 
    } 
 
}

<!doctype html> 
 
<!-- html5 doctype --> 
 
<html> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
    <!-- line added to for responsive layout --> 
 
    <title>Dummy Site</title> 
 
    <link href="style5.css" rel="stylesheet" type="text/css"> 
 
</head> 
 

 
<body> 
 
    <div id="maincontainer"> 
 
    <div id="wrapper"> 
 
     <header></header> 
 
     <div id="spacer1"></div> 
 
     <div id="banner"></div> 
 
     <div id="range"></div> 
 
     <div id="spacer2"></div> 
 
     <div id="cols"></div> 
 
     <div id="spacer3"></div> 
 
     <footer></footer> 
 
    </div> 
 
    </div> 
 
</body> 
 

 
</html>

来源

2015-09-02 22:38:41

哦，我的，有点尴尬的机器人，谢谢你 –

无后顾之忧。它发生;） –

媒体查询无法调整大小

回答

相关问题