LESS CSS在媒体查询中设置variables？
我正在研究一个特定于iPad的网站。 为了使我的网站在iPad和旧版本的iPad上都可以工作，我想在LESS CSS中设置一个variables，如下所示：
@media all and (max-width: 768px) { @ratio: 1; } @media all and (min-width: 769px) { @ratio: 2; } 所以当你设置像素的东西，你可以做
width: 100px * @ratio;
但是我收到了一个编译错误，说没有定义@ratio。 有没有可能有一个解决方法，使其工作？ 谢谢。
这将是很好，但这是不可能的。
LESS将您的媒体查询编译为实际媒体查询，因此在编译时没有指示哪个媒体查询与浏览器相关。
编译之后，你只需要CSS就可以了，所以你不能再有variables了。
你可以这样做，但它不是那么优雅：
@base_width: 100px; @media all and (max-width: 768px) { .something { width: @base_width; } } @media all and (min-width: 769px) { .something { width: @base_width * 2; } }
我知道我迟到了，但有人可能会觉得这很有用。
您可以将样式移动到单独的文件中
// styles.less .foo { width: 100px * @ratio; }
然后在更改variables值之后多次导入文件
// main.less @ratio: 1; // initial value @media all and (max-width: 768px) { @ratio: 1; @import (multiple) "styles"; } @media all and (min-width: 769px) { @ratio: 2; @import (multiple) "styles"; }
请注意（多）在这里很重要
编译的代码将如下所示
// main.css @media all and (max-width: 768px) { .foo { width: 100px; } } @media all and (min-width: 769px) { .foo { width: 200px; } }
这是一个有点hackish，但一个可能的解决scheme是设置一个包装元素的字体大小，并将所有单位设置为em ：
HTML：
<div id="wrap"> <div class="child1"></div> <div class="child2"></div> </div>
减：
#wrap { font-size: 100px; width: 10em; // = 1000px; @media all and (max-width: 768px) { font-size: 60px; } .child1 { width: 5em; // 500px normally, 300px on small screens } .child1 { width: 2.5em; // 250px normally, 150px on small screens } }
如果你有包含文本和子元素的元素，这当然是行不通的。
LESS目前无法做到这一点，尽pipe在技术上可行。 这个function已经在GitHub的一个题为“ 媒体查询中variables较less”的问题中被请求。
另请参阅以下问题： 可以在@media查询中定义variables的CSS预处理器
我发现接受的解决scheme不工作，因为编译器会抱怨mixin没有定义。 另一种解决scheme：
@base_width: 100px; .mixin { width: @base_width; @media all and (min-width: 769px) { width: @base_width * 2; } }
less用我们可以为媒体查询定义variables。
首先检测iPad的分辨率：
@iPad: ~"only screen and (min-width: 40.063em) and (max-width: 64em);
这些是641px和1024px的em等价物。
现在检测高分辨率：
@highResolution: ~"only screen and (-webkit-min-device-pixel-ratio: 1.5)", ~"only screen and (min--moz-device-pixel-ratio: 1.5)", ~"only screen and (-o-min-device-pixel-ratio: 3/2)", ~"only screen and (min-device-pixel-ratio: 1.5)";
现在我们可以在这样的媒体查询中结合这两个variables：
@media @iPad, @highResolution{ .yourCssClass{} }
这只会在具有视网膜显示（或类似的像素密度）的iPad（或类似的分辨率）上有效。
