Question

我是scss的新手，我有一个简短的问题。

我有这个scss代码

.page {
    max-width: 1200px;
    position: relative;
    width: 100%;

    ul{
        background-color: black;
        width: 30%;
        height: 100px;

        @media (max-width: 900px){
            background-color: red;
        }
    }

    ul li{
        color: white;

        @media (max-width: 900px){
            color: black;
        }

    }
}

css文件看起来像那样

.page {
  max-width: 1200px;
  position: relative;
  width: 100%;
}
/* line 9, style.scss */
.page ul {
  background-color: black;
  width: 30%;
  height: 100px;
}
@media (max-width: 900px) {
  /* line 9, style.scss */
  .page ul {
    background-color: red;
  }
}
/* line 21, style.scss */
.page ul li {
  color: white;
}
@media (max-width: 900px) {
  /* line 21, style.scss */
  .page ul li {
    color: black;
  }
}

问题：我有一种方法可以获得一个媒体查询，原因是最大宽度为2倍：900px。没有摆脱嵌套的@media。

Answer 1

您可以尝试使用以下内容：

.page {
  max-width: 1200px;
  position: relative;
  width: 100%;

  ul {
    background-color: black;
    width: 30%;
    height: 100px;

    li{
      color: white;
    }

    @media (max-width: 900px) {
      background-color: red;

      li{
        color: black;
      }
    }
  }
}

Scss - 在媒体上只有一个

1 个答案: