46

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

4

8 回答 8

48

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

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;
    }
}
于 2012-06-05T23:00:14.637 回答
16

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

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

// 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;
  }
}
于 2017-01-11T07:37:48.213 回答
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
}

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

于 2018-11-15T10:21:33.110 回答
1

这有点骇人听闻，但一个可能的解决方案是设置包装元素的字体大小并将所有单位设置为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
        }
    }

如果您有包含文本和子项的元素，那当然不起作用。

于 2013-02-15T21:49:39.093 回答
1

LESS 目前无法做到这一点，尽管它在技术上是可行的。此功能已在题为“媒体查询中的较少变量”的 GitHub 问题中提出请求。

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

于 2015-07-02T09:58:34.227 回答
1

我有一个 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);
于 2019-07-15T16:47:26.343 回答
0

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

@base_width: 100px;

.mixin {
    width: @base_width;

    @media all and (min-width: 769px) {
        width: @base_width * 2;
    }
}
于 2015-09-30T17:00:01.917 回答
-2

我们可以用更少的变量来定义媒体查询的变量。
首先检测 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{} }

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

于 2014-12-03T18:09:09.567 回答