CSS本地变量在媒体查询中不起作用
CSS本地变量在媒体查询中不起作用
提问于 2016-11-21 22:47:04
我尝试在媒体查询中使用CSS变量，但它不起作用。
:root {
--mobile-breakpoint: 642px;
}
@media (max-width: var(--mobile-breakpoint)) {
}回答 2
Stack Overflow用户
发布于 2016-11-21 22:57:44
显然，像这样使用原生CSS变量是不可能的。这是limitations中的一个。
使用它的一个聪明方法是更改media-query中的变量，以影响您的所有风格。我推荐this article。
:root {
--gutter: 4px;
}
section {
margin: var(--gutter);
}
@media (min-width: 600px) {
:root {
--gutter: 16px;
}
}Stack Overflow用户
发布于 2021-08-15 04:38:37
您可以使用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);然后，在body具有mobile类时，应用所需的规则，而不是在CSS文件中使用媒体查询：
.my-div {
/* large screen rules */
}
.mobile .my-div {
/* mobile screen rules */
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/40722882
复制相关文章
相似问题