我目前正处于一个响应迅速的站点项目中,而且很少有很多帮助.
但我希望根据窗口大小改变大小变量.
我尝试了以下代码,但它似乎不起作用.这可能,或者我应该尝试另一种方法吗？
@menu-width: 300px; // default size
@media only screen and (max-width: 400px) {
@menu-width: 100px // smaller size
}
.menu {
width: @menu-width;
}
解决方法
由于我似乎没有得到很多支持将此作为
this question的副本关闭,我基本上会重复我的答案(有一些变化).
@media查询是一种CSS功能,允许当前加载的CSS响应它所呈现的媒体(通常是某种类型的浏览器,但可以是打印等).
LESS是一个CSS预处理器,它在将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
