我目前正在进行一个网站元素,该元素响应迅速且 less 确实帮了很多忙。
但我希望大小变量根据窗口大小而改变。 我试过下面的代码,但它似乎不起作用。这可能吗,还是我应该尝试另一种方法?
@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 查询,而不是 LESS 查询
@media
查询是一种 CSS 功能,它允许当前加载的 CSS 响应它正在呈现的媒体(通常是某种类型的浏览器,但也可以是打印等)。
LESS 是一个 CSS 预处理器,它在加载到浏览器之前创建 CSS,因此在加载之前媒体一直在被检查(这是在 LESS 生成后在 CSS 本身中完成的)。
所以 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
关于css,用@media改变较少的变量,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15927805/