CSS本地变量在媒体查询中不起作用

我试图在媒体查询中使用CSS变量，但它不起作用。

:root {
  --mobile-breakpoint: 642px;
}

@media (max-width: var(--mobile-breakpoint)) {

}

当前回答

实现你想要的一个方法是使用npm包postcss-media-variables。

如果你可以使用npm包，那么你可以在这里查看相同的文档:

postcss-media-variables

例子

/* input */
:root {
  --min-width: 1000px;
  --smallscreen: 480px;
}
@media (min-width: var(--min-width)) {}
@media (max-width: calc(var(--min-width) - 1px)) {}

@custom-media --small-device (max-width: var(--smallscreen));
@media (--small-device) {}

2016-11-21 15:09:43

其他回答

实现你想要的一个方法是使用npm包postcss-media-variables。

如果你可以使用npm包，那么你可以在这里查看相同的文档:

postcss-media-variables

例子

/* input */
:root {
  --min-width: 1000px;
  --smallscreen: 480px;
}
@media (min-width: var(--min-width)) {}
@media (max-width: calc(var(--min-width) - 1px)) {}

@custom-media --small-device (max-width: var(--smallscreen));
@media (--small-device) {}

2016-11-21 15:09:43

简短的回答

您可以使用JavaScript更改媒体查询的值，并将其设置为css变量的值。

// get value of css variable
getComputedStyle(document.documentElement).getPropertyValue('--mobile-breakpoint'); // '642px'

// search for media rule
var mediaRule = document.styleSheets[i].cssRules[j];

// update media rule
mediaRule.media.mediaText = '..'

长回答

我写了一个小脚本，你可以把它放在你的页面上。它将每个值为1px的媒体规则替换为css变量的值——replace-media-1px，将值为2px的规则替换为——replace-media-2px，等等。这适用于，min-width, max-width, height, min-height和max-height的媒体查询，即使它们使用and连接。

JavaScript:

function* visitCssRule(cssRule) {
    // visit imported stylesheet
    if (cssRule.type == cssRule.IMPORT_RULE)
        yield* visitStyleSheet(cssRule.styleSheet);

    // yield media rule
    if (cssRule.type == cssRule.MEDIA_RULE)
        yield cssRule;
}

function* visitStyleSheet(styleSheet) {
    try {
        // visit every rule in the stylesheet
        var cssRules = styleSheet.cssRules;
        for (var i = 0, cssRule; cssRule = cssRules[i]; i++)
            yield* visitCssRule(cssRule);
    } catch (ignored) {}
}

function* findAllMediaRules() {
    // visit all stylesheets
    var styleSheets = document.styleSheets;
    for (var i = 0, styleSheet; styleSheet = styleSheets[i]; i++)
        yield* visitStyleSheet(styleSheet);
}

// collect all media rules
const mediaRules = Array.from(findAllMediaRules());

// read replacement values
var style = getComputedStyle(document.documentElement);
var replacements = [];
for (var k = 1, value; value = style.getPropertyValue('--replace-media-' + k + 'px'); k++)
    replacements.push(value);

// update media rules
for (var i = 0, mediaRule; mediaRule = mediaRules[i]; i++) {
    for (var k = 0; k < replacements.length; k++) {
        var regex = RegExp('\\((width|min-width|max-width|height|min-height|max-height): ' + (k+1) + 'px\\)', 'g');
        var replacement = '($1: ' + replacements[k] + ')';
        mediaRule.media.mediaText = mediaRule.media.mediaText.replace(regex, replacement);
    }
}

CSS:

:root {
  --mobile-breakpoint: 642px;

  --replace-media-1px: var(--mobile-breakpoint);
  --replace-media-2px: ...;
}

@media (max-width: 1px) { /* replaced by 642px */
  ...
}

@media (max-width: 2px) {
  ...
}

2020-05-10 16:43:14

从说明书来看，

中的var()函数可用于替换值的任何部分元素上的任何属性。var()函数不能作为属性名、选择器或除属性值之外的任何东西。 (这样做通常会产生无效的语法，或者值为含义与变量无关。)

你不能在媒体查询中使用它。

这是有道理的。因为你可以将——mobile-breakpoint设置为:root，即<html>元素，并从那里继承到其他元素。但是媒体查询不是一个元素，它不继承<html>，所以它不能工作。

这不是CSS变量想要实现的。你可以使用CSS预处理器。

2016-11-21 15:07:07

媒体查询的第5级规范定义了自定义媒体查询，它几乎可以满足您的需求。它允许您像定义CSS变量一样定义断点，然后在不同的地方使用它们。

示例来自规范:

@custom-media --narrow-window (max-width: 30em);

@media (--narrow-window) {
  /* narrow window styles */
}
@media (--narrow-window) and (script) {
  /* special styles for when script is allowed */
}

目前还没有对这个功能的支持，所以在使用这个功能之前，我们必须等待。

2021-08-13 22:25:22

正如你可以阅读其他答案，仍然不可能这样做。

有人提到了自定义环境变量(类似于自定义css变量env()而不是var())，原理是合理的，尽管仍然有2个主要问题:

浏览器支持弱到目前为止，还没有办法定义它们(但可能在未来会，因为到目前为止这只是一个非官方的草案)

2018-12-15 14:19:38

CSS本地变量在媒体查询中不起作用

推荐文章

最新文章

标签