文章/答案/技术大牛

发布

社区首页 >问答首页 >为什么我的@media查询不起作用？

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

Stack Overflow用户

提问于 2018-07-18 02:00:06

回答 3查看 57关注 0票数 0

    * {
      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学校的@media规则示例。但它不会像@media规则中所写的那样将其背景颜色更改为橄榄色。有人能给我解释一下为什么它不工作吗？

css

media-queries

回答 3

Stack Overflow用户

发布于 2018-07-18 04:58:50

您需要在css中添加html，如下所示：

html, body {
background-color: olive;
}

Here's a working example

票数 0

Stack Overflow用户

发布于 2018-07-18 06:11:04

问题很简单，在问题的代码片段中，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>

票数 0

Stack Overflow用户

发布于 2018-07-18 06:19:12

添加

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>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/51387699

复制

相似问题

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

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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