媒体查询不适用于调整大小

Question

我正在寻找有关媒体查询的帮助。这是我第一次在网站上使用它，但它似乎不起作用。这也是我第一次将 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 像素以下时，颜色仍然保持不变并且没有变为红色。

Answer 1

它不起作用，因为您在 CSS code 中使用 HTML comments 导致语法错误和浏览器无法识别代码。删除注释或将其从  修改为 /* */ 即可。

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>

媒体查询不适用于调整大小

Media queries not working on resize

html

css

media-queries