css，用@media改变变量 [英] css, change less variable with @media

问题描述

但我想要一个尺寸变量根据窗口大小而改变。
我试过下面的代码，但它似乎不工作。这是可能的，还是我应该尝试另一个aproach？

  @ menu-width：300px; // default size 
 
 @media only screen and（max-width：400px）{
 @ menu-width：100px // small size 
} 
 
 .menu {
 width：@ menu-width; 
} 
  

解决方案

得到了很多支持，关闭这是一个重复的

请记住这个问题，我会重复我的回答@media 是一个CSS查询，而不是LESS查询

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

LESS是在 之前创建CSS的 预处理器 ，它被加载到浏览器中， （这是在CSS本身，在它由LESS生成之后完成的）。

所以LESS的正确方法是有相同类型的输出为直接CSS，这意味着您必须在 @media 查询中重复 .menu 选择器，

<$ p>

$ p> @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; / *假设你想要动态到默认值* / 
} 
} 
 
 .menu {
 width：@ menu-width; 
} 
  

但还要看：

• 对于LESS媒体查询的基本概念：如何使用LESS更有效地使用媒体查询？


• 有关获取分组的媒体查询和选择器代码重复的讨论，请参阅： 媒体查询分组，而不是多个分散的媒体查询匹配

I'm currently on a site project that is responsive and less is really helping out a lot.

But I want a size variable to change depending on window size. I've tried the following code, but it doesn't seem to work. Is this possible, or should I try another aproach?

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

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

.menu {
  width: @menu-width;
}

解决方案

Since I don't seem to be getting a lot of support for closing this as a duplicate of this question, I'll essentially repeat my answer (with some variety).

Remember @media is a CSS query, not a LESS query

The @media query is a CSS capability that allows the currently loaded CSS to respond to the media it is being presented on (typically some type of browser, but could be print, etc.).

LESS is a CSS preprocessor that creates CSS before it is loaded into the browser, and thus before the media is ever being checked (which is done in the CSS itself, after it has been generated by LESS).

So the proper method for LESS is to have the same type of output as straight CSS, which means you have to repeat the .menu selector in the @media query so that its value changes for the media type.

Final CSS Output Should Be Something Like

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

.menu {
  width: 300px;
}

There are various ways to generate something like that with LESS. Strictly taking your basic format above, there is this:

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

But also look at:

• For the basic idea of LESS media queries: How can I use media queries more efficiently with LESS?
• For discussion of getting media queries grouped and less repetition of selector code, see: Media Query grouping instead of multiple scattered media queries that match

这篇关于css，用@media改变变量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！