地址运算符（与号）和 @media 查询不起作用

Question

我正在分享下面的代码片段，其中我使用嵌套，但我很困惑如何在其中使用媒体查询。

. connection {

   @media only screen and (max-width: 1200px) {

       & > .list {

           grid-template-columns: 1fr;
       }
   }
}

Answer 1

来自@media：

@media

at 规则可以放置在代码的顶层或嵌套在任何其他条件组 at 规则中。

@media only screen and (max-width: 1200px) {
  .connection {
    & > .list {
      grid-template-columns: 1fr;
    }
  }
}