Question

我对CSS很新，我正在尝试媒体查询。我已经在Stackoverflow和其他网站上关注了很多人对其他帖子的建议但却无法让他们工作。当屏幕低于一定宽度时，我只是想改变盒子的颜色这是我的代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" name"viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css" type="text/css" media="screen">
  </head>
  <body>
    <span class="boxes" id="b1">Box 1</span>
    <span class="boxes" id="b2">Box 2</span>
    <span class="boxes" id="b3">Box 3</span>
    <span class="boxes" id="b4">Box 4</span>
    <span class="boxes" id="b5">Box 5</span>
  </body>
</html>

CSS文件：

.boxes {
  height: 200px;
  width: 200px;
  color: #FFF;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 80px;
  margin: 20px;
  top: 100px;
  position: relative;
  background-color: red;
}

@media only screen and (max-width:600px) {
  .boxes {
    background-color: #000000;
  }
}

我试过了：
* @media screen 没有 CSS文件中的only字词 * html链接标记中没有media="screen" CSS文件中的max-device-width HTML链接标记中的media="only screen and (max-device-width: 600px)"。

我没有尝试过任何工作，我缺少什么？

Answer 1

您在视口元标记中缺少等号。放置它时，您的代码将起作用。 name =“viewport”

Answer 2

请务必将<meta>标记更改为：

 <meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1.0">

您可以尝试指定背景颜色：

@media screen and (min-width:601px) {
.boxes {
  background-color: red;
  }
}

同样，你的照片也适用于我，但也许通过指定只有601px以上的红色背景颜色才能正常工作。

.boxes {
  display: inline-block; /* Added this so they don't overlap */
  height: 200px;
  width: 200px;
  color: #FFF;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 80px;
  margin: 20px;
  top: 100px;
  position: relative;
  
}
@media screen and (min-width:601px) {
.boxes {
  background-color: red;
  }
}
@media screen and (max-width:600px) {
  .boxes {
    background-color: #000000;
  }
}

<span class="boxes" id="b1">Box 1</span>
<span class="boxes" id="b2">Box 2</span>
<span class="boxes" id="b3">Box 3</span>
<span class="boxes" id="b4">Box 4</span>
<span class="boxes" id="b5">Box 5</span>

试用媒体查询，无法让它们发挥作用

2 个答案: