媒体查询中的 LESS CSS 设置变量？

Question

我正在开发一个 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 没有定义。是否有可能有一种解决方法使其工作？谢谢。

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

这有点老套，但一种可能的解决方案是设置包装元素的字体大小并将所有单位设置为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 3

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

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

这些 em 相当于 641px 和 1024px。


现在检测高分辨率：

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

现在我们可以像这样在媒体查询中组合这两个变量：

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

这仅适用于配备 Retina 显示屏（或类似像素密度）的 iPad（或类似分辨率）。

Answer 4

LESS 目前无法做到这一点，尽管它在技术上是可行的。此功能已在标题为 Less variables in media queries 的 GitHub 问题中提出请求。

另请参阅此问题：CSS pre-processor with a possibility to define variables in a @media query

Answer 5

我发现接受的解决方案不起作用，因为编译器会抱怨没有定义 mixin。另一种解决方案：

@base_width: 100px;

.mixin {
    width: @base_width;

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

Answer 6

我知道我的回答迟了，但有人可能会觉得这很有用。

您可以将样式移动到单独的文件中

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

对于那些可能只允许支持相对现代的浏览器（Chrome 49+、FF 31+、无 IE）的用户，您可以改用css variables。

Here is“我可以使用”中的浏览器支持表。

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
}

使用上面的代码，每当屏幕小于 750 像素时，都会重新计算来自 .your-class 的 max-width 属性（因为 --width-var 已更改），当然，当屏幕大小调整为更大时 - css 变量会返回恢复到原来的值。

Answer 8

我有一个 LESS 变量，我在任何地方都在使用它，包括在计算中。对我来说，该变量必须灵活并根据屏幕宽度进行更改，否则所有计算都必须重复，要么使用不同的变量，要么进行不同的计算。

这就是我所做的，现在同一个变量在任何地方都可以正常工作。

它在 CSS 中设置变量，并在 javascript 添加条件类时更改它。 LESS 变量调用 CSS 变量。

IE 11 不支持，请注意。

/* CSS var sets the width for normal screen size */
:root {
  --side-nav-width: 252px;
}

/* change the CSS var under conditions
   I think it would work in a media query but didn't test */
.side-nav-closed {
  --side-nav-width: 72px;
}


/* The LESS var correctly invokes whichever width applies */
@side-nav-width: var(--side-nav-width);