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

时间:2016-07-05 21:40:02

标签: html css media-queries

我对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)"

我没有尝试过任何工作,我缺少什么?

2 个答案:

答案 0 :(得分:0)

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

答案 1 :(得分:0)

请务必将<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>