Question

    * {
      background-color:grey;
    }
    body {
      margin: 0 ;
    }
    #container {
      height:800px;
      display:flex;
      
      text-align:center;
      
      justify-content:flex-start;
      flex-direction: column;
    }


  

    

    #container {
      width:15%;
    }

    #container > a {
      flex:1;
      border-radius:10px;
      height:100px;
    }

    #box-1 {
      background-color:green;
      
      flex-grow: 2;
       

    }
    #box-2 {
      background-color:yellow;
      
      
    }
    #box-3 {
      background-color:pink;
        
     
      
          }

    #box-4 {
      background-color:aqua;
      
     
      }

    #box-5 {
      background-color:blue;
      
     
    }

    #box-6 {
      
      background-color:chocolate;
     
    }


    @media screen and (max-width: 600px) {
  body {
    background-color: olive;
  }
}

<body>
  <nav>
  <div id="container">
    <a id="box-1" href="#"></a>
    <a id ="box-2" href="#"></a>
    <a id="box-3" href="#"></a>
    <a id="box-4" href="#"></a>
    <a id="box-5" href="#"></a>
    <a id="box-6"href="#"></a>
    <a href="#"></a>
  </div>
</nav>
</body>

你好，最近我正在学习flexbox，现在我正尝试回到@media规则，它似乎不起作用。我什至尝试将其更改为w3 school的@media规则示例。但是它不会像@media规则中那样将其背景颜色更改为橄榄色。谁能解释一下它为什么不起作用？

Answer 1

您需要像这样在您的CSS中添加html：

html, body {
background-color: olive;
}

Here's a working example

Answer 2

问题很简单，在您的问题摘要中，nav占据了整个页面，因此它完全覆盖了body。背景颜色body仅在其顶部没有元素时显示。

Nav受此规则影响：

* {
  background-color: grey;
}

最好的做法是不要使用通配符选择器来设置背景颜色。相反，如果您希望页面的背景在台式机上显示为灰色，而在移动设备上显示为橄榄色，请执行以下操作：

body {
  background-color: grey;
}
@media (max-width: 600px) {
  body {
    background-color: olive;
 }
}

然后完全删除通配符规则。为您实际上希望根据需要具有特殊背景色的元素制定单独的规则。

body {
  background-color: gray;
  margin: 0;
}
#container {
  height: 800px;
  display: flex;
  text-align: center;
  justify-content: flex-start;
  flex-direction: column;
}
#container {
  width: 15%;
}
#container>a {
  flex: 1;
  border-radius: 10px;
  height: 100px;
}
#box-1 {
  background-color: green;
  flex-grow: 2;
}
#box-2 {
  background-color: yellow;
}
#box-3 {
  background-color: pink;
}
#box-4 {
  background-color: aqua;
}
#box-5 {
  background-color: blue;
}
#box-6 {
  background-color: chocolate;
}
@media screen and (max-width: 600px) {
  body {
    background-color: olive;
  }
}

<body>
  <nav>
    <div id="container">
      <a id="box-1" href="#"></a>
      <a id="box-2" href="#"></a>
      <a id="box-3" href="#"></a>
      <a id="box-4" href="#"></a>
      <a id="box-5" href="#"></a>
      <a id="box-6" href="#"></a>
      <a href="#"></a>
    </div>
  </nav>
</body>

Answer 3

添加

nav {
  background-color: transparent;
}

原因：nav的宽度为100％，并具有*规则的背景色，因此其灰色背景会分散在整个宽度上，甚至低于600px宽度。上面的规则可以防止这种情况的发生，并让body的橄榄色背景通过。

* {
  background-color: grey;
}

body {
  margin: 0;
}

#container {
  height: 800px;
  display: flex;
  text-align: center;
  justify-content: flex-start;
  flex-direction: column;
}

nav {
  background-color: transparent;
}

#container {
  width: 15%;
}

#container>a {
  flex: 1;
  border-radius: 10px;
  height: 100px;
}

#box-1 {
  background-color: green;
  flex-grow: 2;
}

#box-2 {
  background-color: yellow;
}

#box-3 {
  background-color: pink;
}

#box-4 {
  background-color: aqua;
}

#box-5 {
  background-color: blue;
}

#box-6 {
  background-color: chocolate;
}

@media screen and (max-width: 600px) {
  body {
    background-color: olive;
  }
}

<body>
  <nav>
    <div id="container">
      <a id="box-1" href="#"></a>
      <a id="box-2" href="#"></a>
      <a id="box-3" href="#"></a>
      <a id="box-4" href="#"></a>
      <a id="box-5" href="#"></a>
      <a id="box-6" href="#"></a>
      <a href="#"></a>
    </div>
  </nav>
</body>

为什么我的@media查询不起作用？

3 个答案: