使用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){}

并将我想要该查询的所有网站代码放在那里，或者是否可以在嵌套的较少文件中的任何地方添加相同的查询，我只是做错了什么？

谢谢！

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文件的相关部分。