我试图在媒体查询中使用CSS变量,但它不起作用。
:root {
--mobile-breakpoint: 642px;
}
@media (max-width: var(--mobile-breakpoint)) {
}
我试图在媒体查询中使用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,至少是最新的生产版本。
一个限制:如果您需要将值作为变量访问—例如在其他地方的计算中使用—您将需要有一个变量,并且需要在两个地方定义变量:媒体查询和变量声明。
其他回答
实现你想要的一个方法是使用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) {}
正如你可以阅读其他答案,仍然不可能这样做。
有人提到了自定义环境变量(类似于自定义css变量env()而不是var()),原理是合理的,尽管仍然有2个主要问题:
浏览器支持弱 到目前为止,还没有办法定义它们(但可能在未来会,因为到目前为止这只是一个非官方的草案)
媒体查询的第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 */
}
目前还没有对这个功能的支持,所以在使用这个功能之前,我们必须等待。
你可以做的是@media查询你的:根语句!
:root {
/* desktop vars */
}
@media screen and (max-width: 479px) {
:root {
/* mobile vars */
}
}
完全适用于Chrome, Firefox和Edge,至少是最新的生产版本。
一个限制:如果您需要将值作为变量访问—例如在其他地方的计算中使用—您将需要有一个变量,并且需要在两个地方定义变量:媒体查询和变量声明。
你可以使用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 */
}