使用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文件中的任何位置添加相同的查询都可以，而我只是做错了什么？

谢谢！

- mike

Answer 1

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

- Martin

---

似乎嵌套的媒体查询已经开始生效了。我想我之前弄乱了一些CSS，当我重新构建了一堆东西后，媒体查询开始工作了。感谢这个信息，这对我来说是一个很好的参考！ - mike

Answer 2

对于使用 less 的媒体规则，我的建议是使用Escaping。

样例

@min768: (min-width: 768px);

.element {
  @media @min768 {
    font-size: 1.2rem;
  }
}

- Daniel De León

---

这个不起作用，第二个冒号会导致一些LESS编译器失败。 - patrick