Calc 不适用于媒体查询，变量也不适用于

Question

使用引导5.3.1

尝试编写一个媒体查询，随着页面大小从 bootstrap-lg （例如最小大小 = 992px）缩小到中等大小的页面（例如最大大小 = 991px 宽）

这有效。

@media screen and (max-width: 991px){
    #home-page__content-outer{
    padding-left:0;
    }

    #home-page__hero-banner .hero__title p{
        font-size:65px;
    }

}

BS 定义 --bs-breakpoint-lg : 992px 这不行

@media screen and (max-width: calc( var( --bs-brekapoint-lg) - 1px)){
    #home-page__content-outer{
    padding-left:0;
    }

    #home-page__hero-banner .hero__title p{
        font-size:65px;
    }

}

如果我定义一个新变量： --bs-breakpoint-below-lg : 991px 并将我的媒体查询更改为下面的内容，它也失败了

@media screen and (max-width: var(--bs-breakpoint-below-lg)){
    #home-page__content-outer{
    padding-left:0;
    }

    #home-page__hero-banner .hero__title p{
        font-size:65px;
    }

}

如果我删除 var(--bs-breakpoint-below-lg) 并将其替换为 991px，它会再次工作，所以它不是查询。

我已经检查了我的样式，定义位于浏览器中。媒体查询似乎不适用于变量或计算。 从 Firefox 中渲染页面的 :root 部分中看到的样式表

    --bs-breakpoint-below-sm: 575px;
    --bs-breakpoint-below-md: 767px;
    --bs-breakpoint-below-lg: 991px;
    --bs-breakpoint-below-xl: 1199px;
    --bs-breakpoint-below-xxl: 1399px

我使用的是 FireFox 124.0.2

Answer 1

本文涵盖了该问题：[https://stackoverflow.com/questions/40722882/css-native-variables-not-working-in-media-queries?rq=2]

基本上，媒体查询是 GET（即获取最大宽度）而不是集合，例如

width: 991px;