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

【问题标题】：Why my media queries don't work?为什么我的媒体查询不起作用？
【发布时间】：2016-07-29 21:53:18
【问题描述】：

我用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
}

【问题讨论】：

这看起来像 Sass (SCSS) 而不是 CSS。

标签： html css media-queries flexbox responsive

【解决方案1】：

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

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

.l-fg3 > div {
    ...
}

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

【讨论】：

你是对的，但我认为主要问题是 OP 发布了 SCSS 而不是 CSS。

【解决方案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>

我把它作为一个代码笔，所以你可以在预处理（less/sass/etc）和原始 CSS 之间切换： http://codepen.io/anon/pen/dMJqOz

【讨论】：

好的，我知道了。现在我有另一个问题：@media screen and (min-width: 600px) { .l-fg3 > div { margin: 10px;弹性基础：31%； } } @ 媒体屏幕和（最小宽度：600px）{ .featured { flex-basis: 43%;我的特色 div 不想成为 43%，他们保持不变 - 31%。我该如何解决？
听起来像Specificity 的情况。两个选择器在竞争，在这种情况下，第一个胜过第二个。尝试使用您的选择器更具体，例如：.l-fg3 > div.featured { flex-basis: 43%; }

【解决方案3】：

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

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

【讨论】：