Bootstrap 5.3.1媒体查询中calc与CSS变量失效问题求助

先解决最明显的错误：失效代码1的拼写问题 #

你在失效代码1里把Bootstrap内置变量--bs-breakpoint-lg写错成了--bs-brekapoint-lg（breakpoint里的字母k缺失），这直接导致浏览器无法识别该变量，媒体查询自然失效。修正拼写后即可正常运行：

@media screen and (max-width: calc(var(--bs-breakpoint-lg) - 1px)) {
    #home-page__content-outer {
        padding-left: 0;
    }
    #home-page__hero-banner .hero__title p {
        font-size: 65px;
    }
}

再排查失效代码2的问题 #

你已经定义了--bs-breakpoint-below-lg: 991px但媒体查询无法读取，大概率是变量作用域的问题：

• 必须把自定义变量定义在全局作用域中（比如:root伪类下），这样媒体查询才能获取到变量值。如果变量定义在局部选择器（例如.container）内部，媒体查询是无法访问到的。正确的全局定义方式如下：

  :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版本本身支持媒体查询中使用CSS变量，因此无需考虑兼容性问题，重点检查变量作用域是否正确即可。

额外提个Bootstrap自带的便捷写法 #

如果使用Sass开发，可以直接用Bootstrap 5内置的断点工具类，不用手动编写媒体查询：

@include media-breakpoint-down(lg) {
    #home-page__content-outer {
        padding-left: 0;
    }
    #home-page__hero-banner .hero__title p {
        font-size: 65px;
    }
}

编译后会自动生成对应max-width: 991px的媒体查询，省去手动计算的麻烦。

内容的提问来源于stack exchange，提问作者Shane