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

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

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

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

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

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

最终的 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;
    }