由于我似乎没有得到很多支持将此作为
this question的副本关闭,我基本上会重复我的答案(有一些变化).
记住@media是一个CSS查询,而不是一个LESS查询
@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;
}
但也看看: