Question

我使用Moving from HTML Grid Systems to CSS Grid Systems的代码创建了一个页面。但我的页面不能正常工作，媒体查询似乎无法正常工作。他们为什么不工作？ 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()函数中的值之间加一个空格。）

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

我已将其作为代码集，因此您可以在预处理（less / sass / etc）和vanilla CSS之间切换： http://codepen.io/anon/pen/dMJqOz

Answer 3

如果CSS块中有错误，整个块将停止处理。 CSS Lint正在告诉你究竟是什么问题。例如：

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

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

3 个答案: