Bootstrap 5 怎么用 CSS 变量控制断点渐变-Bootstrap教程-PHP中文网

tailwind 的 md:bg-gradient-primary 在 bootstrap 5 中失效，因其不识别 tailwind 断点前缀；需用 css 变量配合媒体查询实现断点渐变，变量须带单位（如 50%），并分层处理深色模式。

bootstrap 5 怎么用 css 变量控制断点渐变

为什么直接用 `md:bg-gradient-primary` 会失效

因为这是 Tailwind 的语法，Bootstrap 5 完全不识别。所有 Bootstrap 5 的 bg-gradient-* 类（如 bg-gradient-primary）都是无媒体查询的全局 CSS 规则，写在哪都生效，断点前缀对它零作用。你加了 md: 前缀，浏览器压根不会生成对应样式——DevTools 的 Styles 面板里根本找不到那条规则。

怎么用 CSS 变量配合媒体查询实现断点渐变

核心是把断点值、颜色、方向都抽成变量，再在媒体查询中组合使用。不能把整个 linear-gradient() 塞进一个变量，浏览器会判为非法值；必须拆解为原子级变量。

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

--bs-breakpoint-md 要自己定义（Bootstrap 5 原生 Sass 变量不输出为 CSS 变量），例如：:root { --bs-breakpoint-md: 768px; }
颜色和方向也得独立变量：--grad-start: #0d6efd;、--grad-end: #6f42c1;、--grad-angle: 135deg;

媒体查询里组合：

@media (min-width: var(--bs-breakpoint-md)) {
  .hero-section {
    background-image: linear-gradient(var(--grad-angle), var(--grad-start), var(--grad-end));
  }
}

小屏 fallback 必须写在媒体查询外：.hero-section { background-color: #fff; }，否则大屏可能继承不到纯色底

容易踩的坑：CSS 变量在 `linear-gradient()` 里怎么写才不丢 stop

渐变里的 color stop（比如 50%）如果来自变量，必须带单位。浏览器对位置值校验极严：--stop-mid: 50 ❌ 会被静默丢弃；--stop-mid: 50% ✅ 才生效。调试时看 DevTools 的 Computed 面板，如果 background-image 只显示两段色标，基本就是某个 var(--xxx) 缺单位。

别写：--stop-a: 0;、--stop-b: 50; → 全部失效
要写：--stop-a: 0%;、--stop-b: 50%;、--stop-c: 100%;
组合时严格按格式：linear-gradient(var(--grad-angle), var(--grad-start) var(--stop-a), var(--grad-end) var(--stop-b))

深色模式 + 断点渐变怎么共存

不能只靠 @media (prefers-color-scheme: dark) 覆盖整个渐变——那样会把断点逻辑也冲掉。正确做法是分层覆盖：先确保断点媒体查询生效，再在其内部嵌套深色模式查询。

基础断点规则先写：@media (min-width: var(--bs-breakpoint-md)) { ... }

在里面再加一层：

@media (min-width: var(--bs-breakpoint-md)) {
  .hero-section {
    background-image: linear-gradient(var(--grad-angle), var(--grad-start), var(--grad-end));
  }
  @media (prefers-color-scheme: dark) {
    .hero-section {
      --grad-start: #4a0a80;
      --grad-end: #0f55c0;
    }
  }
}