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

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

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

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

<强> LESS：

#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目前无法做到这一点，尽管技术上可以做到这一点。在名为Less variables in media queries的GitHub问题中请求了此功能。

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

Answer 5

对于那些可能只允许支持相对较新的浏览器（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像素时，max-width的{{1}}属性都会被重新计算（因为.your-class被更改），当然，屏幕尺寸也会被调整为更大-css变量恢复到其原始值。

Answer 6

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

@base_width: 100px;

.mixin {
    width: @base_width;

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

Answer 7

我有一个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);

Answer 8

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

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

这些相当于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{} }

仅在具有视网膜显示（或类似像素密度）的iPad（或类似分辨率）上有效。

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

8 个答案: