为什么我的媒体查询不起作用？

Question

我制作了一个页面，其中包含从HTML网格系统到CSS网格系统的代码。 但是我的页面无法正常工作，媒体查询似乎不起作用。 他们为什么不工作？ CSS lint表示CSS Lint存在一些问题

HTML：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <!-- <meta name="viewport" content="width=device-width"> -->
  <title>Flex-training</title>
  <link rel="stylesheet" href="main.css" />
</head>

<body>
  <div class="l-flex">
    <div id="back" class="l-fg3">
      <div>Featured Item</div>
      <div>Featured Item</div>
      <div>Grid item</div>
      <div>Grid item</div>
      <div>Grid item</div>
    </div>
  </div>
</body>
</html>

CSS：

.l-fg3 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
  margin: -10px;
}

.l-fg3 > div {
  -webkit-flex-basis: 100%;
      -ms-flex-preferred-size: 100%;
          flex-basis: 100%;
  @media screen and (min-width: 600px) {
    margin: 10px;
    -webkit-flex-basis: calc(33.333%-20px);
        -ms-flex-preferred-size: calc(33.333%-20px);
            flex-basis: calc(33.333%-20px);
  }

  > div:nth-child(1),
  > div:nth-child(2) {
    @media (min-width: 600px) {
      flex-basis: calc(50% - 20px);
    }
  }
}

.l-flex {
  overflow-x: hidden;
}


div {
  border: 0.2px solid #506183;
  border-radius: 5px;
  background-color: #81f6a9;
}
#back {
  background-color: #36a4c3
}

Answer 1

媒体查询包含选择器组，而不是相反。

您需要像这样修改CSS：

.l-fg3 > div {
    ...
}

@media screen and (min-width: 600px) {
  .l-fg3 > div {
    ...
  }
}

Answer 2

这是SCSS 。 编译成CSS后，它似乎可以正常工作：

（此外，您需要在calc()函数中的值之间放置一个空格。）

 .l-fg3 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; margin: -10px; } .l-fg3 > div { -webkit-flex-basis: 100%; -ms-flex-preferred-size: 100%; flex-basis: 100%; } @media screen and (min-width: 600px) { .l-fg3 > div { margin: 10px; -webkit-flex-basis: calc(33.333% - 20px); -ms-flex-preferred-size: calc(33.333% - 20px); flex-basis: calc(33.333% - 20px); } } @media (min-width: 600px) { .l-fg3 > div > div:nth-child(1), .l-fg3 > div > div:nth-child(2) { flex-basis: calc(50% - 20px); } } .l-flex { overflow-x: hidden; } div { border: 0.2px solid #506183; border-radius: 5px; background-color: #81f6a9; } #back { background-color: #36a4c3; }

 <div class="l-flex"> <div id="back" class="l-fg3"> <div>Featured Item</div> <div>Featured Item</div> <div>Grid item</div> <div>Grid item</div> <div>Grid item</div> </div> </div>

我将其作为Codepen放置，因此您可以在预处理的（少/低/等/等）和原始CSS之间切换： http : //codepen.io/anon/pen/dMJqOz

Answer 3

如果CSS块中有错误，则整个块将停止处理。 CSS Lint会告诉您确切的问题所在。 例如：

> div:nth-child(1),
> div:nth-child(2)

为什么我的媒体查询不起作用？

问题描述

3 个解决方案

解决方案1
3 2016-04-08 15:01:58

解决方案2
1 2016-04-08 15:10:23

解决方案3
0 2016-04-08 15:05:57

为什么我的媒体查询不起作用？

问题描述

3 个解决方案

解决方案1 3 2016-04-08 15:01:58

解决方案2 1 2016-04-08 15:10:23

解决方案3 0 2016-04-08 15:05:57

解决方案1
3 2016-04-08 15:01:58

解决方案2
1 2016-04-08 15:10:23

解决方案3
0 2016-04-08 15:05:57