css - 将媒体查询与 LESS 结合使用

Question

我看过很多关于在 LESS 中嵌套媒体查询的帖子，所以我不想重复其中的任何内容或浪费任何人的时间，但我的问题略有不同。我在 .less 文件中有一个嵌套的媒体查询，代码如下:

@media only screen and (max-width: 420px), only screen and (max-device-width: 420px){}

那是在我的 login.less 上，所以我的登录页面会更加灵敏。我也想让另一个页面响应，所以在我的 aboutMe.less 中我也添加了相同的代码:

@media only screen and (max-width: 420px), only screen and (max-device-width: 420px){}

但它根本不触发。 css 中不能有两个相同类型的媒体查询吗？所以我需要制作一个 .less 文件 mediaqueries.less 并且只有一个这样的实例:

@media only screen and (max-width: 420px), only screen and (max-device-width: 420px){}

并将我希望该查询触发的所有站点代码放在那里，或者是否可以在嵌套的 less 文件中的任何地方添加相同的查询，而我只是做错了什么？

谢谢!

Answer 1

如果您愿意，CSS 支持多个相同的媒体查询，但 CSS 不支持嵌套。

另一方面，LESS 确实支持一些嵌套媒体查询的方法。您可以在这里阅读:http://lesscss.org/features/#extend-feature-scoping-extend-inside-media

例子:

@media screen {
  @media (min-width: 1023px) {
    .selector {
      color: blue;
    }
  }
}

编译为:

@media screen and (min-width: 1023px) {
  .selector {
    color: blue;
  }
}

LESS 还支持像这样在选择器下面嵌套媒体查询:

footer {
  width: 100%;
  @media screen and (min-width: 1023px) {
    width: 768px;
  }
}

编译为:

footer {
  width: 100%;
}
@media screen and (min-width: 1023px) {
  footer {
    width: 768px;
  }
}

如果这不能回答您的问题，请发布您的 LESS 文件的相关部分。