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

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

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

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

}

当前回答

你可以做的是@media查询你的:根语句!

:root {
     /* desktop vars */
}
@media screen and (max-width: 479px) {
    :root {
        /* mobile vars */
    }
}

完全适用于Chrome, Firefox和Edge，至少是最新的生产版本。

一个限制:如果您需要将值作为变量访问—例如在其他地方的计算中使用—您将需要有一个变量，并且需要在两个地方定义变量:媒体查询和变量声明。

2019-01-26 04:42:47

其他回答

媒体查询的第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变量是不可能的。这是局限性之一。

使用它的一个聪明的方法是改变media-query中的变量，以影响你的所有风格。我推荐这篇文章。

:root {
  --gutter: 4px;
}

section {
  margin: var(--gutter);
}

@media (min-width: 600px) {
  :root {
    --gutter: 16px;
  }
}

2016-11-21 14:57:43

你可以使用matchMedia以编程方式构建一个媒体查询:

const mobile_breakpoint = "642px";
const media_query = window.matchMedia(`(max-width: ${mobile_breakpoint})`);
function toggle_mobile (e) {
  if (e.matches) {
    document.body.classList.add("mobile");
  } else {
    document.body.classList.remove("mobile");
  }
}
// call the function immediately to set the initial value:
toggle_mobile(media_query);
// watch for changes to update the value:
media_query.addEventListener("change", toggle_mobile);

然后，不是在CSS文件中使用媒体查询，而是在body有mobile类时应用所需的规则:

.my-div {
  /* large screen rules */
}

.mobile .my-div {
  /* mobile screen rules */
}

2021-08-15 04:38:37

从说明书来看，

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

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

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

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

2016-11-21 15:07:07

你可以做的是@media查询你的:根语句!

:root {
     /* desktop vars */
}
@media screen and (max-width: 479px) {
    :root {
        /* mobile vars */
    }
}

完全适用于Chrome, Firefox和Edge，至少是最新的生产版本。

一个限制:如果您需要将值作为变量访问—例如在其他地方的计算中使用—您将需要有一个变量，并且需要在两个地方定义变量:媒体查询和变量声明。

2019-01-26 04:42:47

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

推荐文章

最新文章

标签