在媒体查询中较少CSS设置变量？

一尘不染

在媒体查询中较少CSS设置变量？

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。是否有解决方法才能使其正常工作？谢谢。

阅读 322

2020-05-16

共1个答案

一尘不染

很好，但这是不可能做到的。

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

2020-05-16