在媒体查询LESS CSS设置变量？(LESS CSS set variables in media

我正在一个iPad专用网站上。 为了使双方的Retina显示屏的iPad和旧版本的iPad的在我的网站的工作，我想设置一个变量在像媒体查询LESS CSS：

@media all and (max-width: 768px) {
    @ratio: 1;
}

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

所以，当你正在设置在像素任何东西，你可以做

width: 100px * @ratio;

但我得到一个编译错误说@ratio没有定义。 是否有可能有一种变通方法，使工作？ 谢谢。

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

Answer 2:

我知道我有我的回答晚，但有人可能会发现这很有用。

您可以将您的样式到一个单独的文件

// styles.less
.foo {
  width: 100px * @ratio;
}

然后导入文件多次改变变量的值之后

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

Answer 3:

这是一个小的hackish，但一个可能的解决方案是设置字体大小的包装元素，并将各单位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
        }
    }

那当然，如果你有一个包含文本和子元素不起作用。

Answer 4:

LESS目前还无法做到这一点，尽管这在技术上是可行为它做它。 此功能已被要求在题为GitHub的问题在媒体查询不到变量 。

又见这个问题： CSS预处理器的可能性，以在@media查询定义变量

Answer 5:

对于那些谁可能允许配套比较现代的浏览器只器（Chrome 49+，FF 31+，没有IE浏览器），你可以使用CSS变量来代替。

这里是从“我可以使用”浏览器支持表。

html {
    --width-var: 300px;

    @media only screen and (max-width: 750px) {
        --width-var: 200px;
   }
}

.your-class {
    max-width: calc( var(--width-var) * 2 );
    .... // tons of other props
}

与上面的代码，每当屏越来越小于750px， max-width从属性.your-class被重新计算（因为--width-var被改变），以及当然，当屏幕的尺寸调整为更大的- CSS可变回来其原始值。

Answer 6:

我发现接受的解决方案无法工作，因为没有定义，编译器会抱怨的混入。 另一种解决方案：

@base_width: 100px;

.mixin {
    width: @base_width;

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

Answer 7:

用量少，我们可以定义为媒体查询变量。
首先是检测的iPad分辨率：

@iPad: ~"only screen and (min-width: 40.063em) and (max-width: 64em);

这些都是EM相当于641px和1,024像素。


现在，检测分辨率高：

@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)";

现在，我们可以在这样的媒体查询结合这2个变量：

@media @iPad, @highResolution{ .yourCssClass{} }

这将是有效的只是在iPad（或类似的分辨率）与视网膜显示器（或相似的像素密度）。

文章来源: LESS CSS set variables in media query?