css – 使用LESS的媒体查询

我已经看过很多关于在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){}

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

谢谢！

如果您愿意,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文件的相关部分.