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

Question

I made a page with code from Moving from HTML Grid Systems to CSS Grid Systems . 我制作了一个页面，其中包含从HTML网格系统到CSS网格系统的代码。 But my page doesn't work as it has to, media queries seem to be not working. 但是我的页面无法正常工作，媒体查询似乎不起作用。 Why don't they work? 他们为什么不工作？ CSS lint says there are some problems CSS Lint CSS lint表示CSS Lint存在一些问题

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

Media queries contain selectors groups, not the other way around. 媒体查询包含选择器组，而不是相反。

You need to modify your CSS like so: 您需要像这样修改CSS：

.l-fg3 > div {
    ...
}

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

Answer 2

This is SCSS . 这是SCSS 。 It looks like it works once compiled to CSS: 编译成CSS后，它似乎可以正常工作：

(Also, you need to put a space between the values in your calc() functions.) （此外，您需要在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>

I've put it as a codepen so you can toggle between pre-processed (less/sass/etc) and vanilla CSS: http://codepen.io/anon/pen/dMJqOz 我将其作为Codepen放置，因此您可以在预处理的（少/低/等/等）和原始CSS之间切换： http : //codepen.io/anon/pen/dMJqOz

Answer 3

When you have errors in a CSS block, the entire block will stop processing. 如果CSS块中有错误，则整个块将停止处理。 The CSS Lint is telling you exactly what the problems are. CSS Lint会告诉您确切的问题所在。 For example: 例如：

> 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