css，用@media改变变量

Question

我目前正处于一个响应迅速的网站项目中，并且很少有很多帮助。

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

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

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

.menu {
  width: @menu-width;
}

Answer 1

由于我似乎没有得到很多支持将此作为this question的副本关闭，我基本上会重复我的回答（有一些变化）。

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

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

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

因此，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媒体查询的基本概念：How can I use media queries more efficiently with LESS?
• 有关将媒体查询分组并减少重复选择器代码的讨论，请参阅：Media Query grouping instead of multiple scattered media queries that match

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;
    }