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

我正在开发一个专门针对iPad的网站。为了使我的网站能够在retina display iPad和旧版本的iPad上运行，我想在媒体查询中设置一个较少CSS的变量，如：

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

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

因此，当您以像素为单位设置任何内容时，您可以

width: 100px * @ratio;

---

但是我得到一个编译错误，说@ratio没有定义。有没有可能有一个变通的办法使它发挥作用？谢谢。

那太好了，但这样做是不可能的

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

---

这有点老套，但一个可能的解决方案是为包装器元素设置字体大小，并将所有单位设置为

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

---

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

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

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

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

@base_width: 100px;

.mixin {
    width: @base_width;

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

这些是等效于641px和1024px的em。


现在检测高分辨率：

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

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

@base_width: 100px;

.mixin {
    width: @base_width;

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

现在我们可以在媒体查询中组合这两个变量，如下所示：

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

---

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

LESS目前无法做到这一点，尽管技术上它可以做到这一点。这项功能已在GitHub发行的名为

---

另请参见此问题：

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

@base_width: 100px;

.mixin {
    width: @base_width;

    @media all and (min-width: 769px) {
        width: @base_width * 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;
  }
}

---

对于那些可能只支持相对现代浏览器（Chrome49+、FF31+、无IE）的用户，您可以使用

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

---

使用上面的代码，每当屏幕小于750px时，

中的
max width
属性将重新计算您的类

（因为

--width var

已更改），当然，当屏幕大小调整为更大时，css变量将返回其原始值。

我在任何地方使用的变量都较少，包括在计算中。对我来说，变量必须是灵活的，并且随着屏幕宽度的变化而变化，否则所有的计算都必须重复，要么使用不同的变量，要么进行不同的计算

这就是我所做的，现在无论在哪里使用同一个变量，它都能正常工作

它在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);

---

在媒体查询之前，尝试在“全局范围”中声明

@ration

，然后在其中更改它。@JamWaffles LESS中的所有变量都是常量。我今天遇到了同样的问题，我找到了一个解决方案：感谢您的解释。所以似乎没有办法达到接近的效果？@Sean这个项目可能对你感兴趣：看起来你想用宽度来实现这一点，但是如果你想在视网膜显示的背景图像中增加一倍的分辨率，repo有一个名为retina.less的文件，其中有一个mixin。我明白了。这不是我想要的，因为我的文件少了很多。也许我们必须使用%或em。事实上，我刚刚意识到没有必要为iPad3设置不同的宽度，因为iPad3也会呈现1024x768的网页。我不认为这是不可能的，因为在生成的媒体查询中，每次使用变量都会产生一个重载。这当然不会是编译器中的琐碎代码，但会非常有用。这是一个解决方法，而不是问题的答案。只是一个出色的解决方案+1如果您有一个使用此方法的大型样式包，它实际上会削弱chrome开发工具。