LESS CSS设置变量在媒体查询?

前端之家收集整理的这篇文章主要介绍了LESS CSS设置变量在媒体查询?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我在一个iPad专用网站上工作。为了使我的网站工作在视网膜显示iPad和旧版本的iPad,我想在LESS CSS中设置一个变量在媒体查询如:
@media all and (max-width: 768px) {
    @ratio: 1;
}

@media all and (min-width: 769px) {
    @ratio: 2;  
}

所以,当你设置任何像素,你可以做

width: 100px * @ratio;

但我有一个编译错误,@ratio没有定义。有可能有一个解决方法,使其工作?谢谢。

解决方法

这将是很好,但这是不可能这样做。

LESS将您的媒体查询编译为实际的媒体查询,因此在编译时没有指示哪个媒体查询将与浏览器相关。

编译后的时间你只是CSS不少,所以你不能再有变量了。

你可以做到这一点,但它不那么优雅:

@base_width: 100px;

@media all and (max-width: 768px) {
    .something {
        width: @base_width;
    }
}

@media all and (min-width: 769px) {
    .something {
        width: @base_width * 2;
    }
}

猜你在找的CSS相关文章