css - css，使用@media 更改更少的变量

Question

我目前正在进行一个响应迅速的站点项目，而 less 确实有很大帮助。

但我希望一个大小变量根据窗口大小而改变。我已经尝试了以下代码，但它似乎不起作用。这是可能的，还是我应该尝试另一种方法？

@menu-width: 300px; // default size

@media only screen and (max-width: 400px) {
  @menu-width: 100px // smaller size
}

.menu {
  width: @menu-width;
}

Answer 1

由于我似乎没有得到很多支持来关闭这个作为这个问题的副本，我基本上会重复我的答案（有一些变化）。

记住@media是 CSS 查询，而不是 LESS 查询

查询是一种 CSS 功能，@media它允许当前加载的 CSS 响应它正在呈现的媒体（通常是某种类型的浏览器，但可以是打印等）。

LESS 是一个 CSS预处理器，它在 CSS 加载到浏览器之前创建 CSS ，因此在媒体被检查之前（这是在 CSS 本身中完成的，在 LESS 生成之后）。

因此，LESS 的正确方法是使用与直接 CSS 相同类型的输出，这意味着您必须.menu在查询中重复选择器，@media以便其值随媒体类型而变化。

最终的 CSS 输出应该是这样的

@media only screen and (max-width: 400px) {
  .menu {
    width: 100px; 
  }
}

.menu {
  width: 300px;
}

有多种方法可以用 LESS 生成类似的东西。严格按照上面的基本格式，有这样的：

@menu-width: 300px; // default size

@media only screen and (max-width: 400px) {
  .menu {
    width: @menu-width - 200px; /* assuming you want it dynamic to default */
  }
}

.menu {
  width: @menu-width;
}

但也要看看：

• 对于 LESS 媒体查询的基本思想：如何使用 LESS 更有效地使用媒体查询？
• 有关将媒体查询分组并减少选择器代码重复的讨论，请参阅：媒体查询分组而不是匹配的多个分散的媒体查询

Answer 2

是的，但这样你必须重写所有

最好的方法应该是（但它不起作用）

@w : 10px

@media (min-width: 1440px) {

    @w:500px;

}
@media (min-width: 1024px) and (max-width: 1280px) {

@w:300px;

}

@media (min-width: 800px) and (max-width: 1020px) {

    @w:200px;
}

.any{
        width:@w;
    }