0

我用从 HTML Grid Systems 到 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
}
4

3 回答 3

3

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

你需要像这样修改你的CSS：

.l-fg3 > div {
    ...
}

@media screen and (min-width: 600px) {
  .l-fg3 > div {
    ...
  }
}
于 2016-04-08T15:01:58.463 回答
1

这是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，所以你可以在预处理（less/sass/etc）和香草CSS之间切换： http://codepen.io/anon/pen/dMJqOz

于 2016-04-08T15:10:23.210 回答
0

当 CSS 块中出现错误时，整个块将停止处理。CSS Lint 准确地告诉您问题所在。例如：

> div:nth-child(1),
> div:nth-child(2)
于 2016-04-08T15:05:57.023 回答