如何根据指定类是否存在条件设置媒体查询的宽度像素阈值？

原方案失效原因说明 #

SCSS是预编译语言，所有变量计算、样式规则生成都会在代码打包阶段完成，无法感知浏览器运行时的DOM类名状态，你写的全局变量覆盖逻辑会在编译时直接生效，和运行时有没有two-list类完全无关，所以原来的方案不可行。

方案1：使用容器查询（最优解，兼容性支持Chrome 105+、Firefox 110+、Safari 16+） #

你的需求本质是让列表的响应式基于自身可用宽度判断，而非全局屏幕宽度，CSS容器查询刚好可以完美适配这个场景，不需要区分one-list/two-list类，也不用维护两套断点：

.list {
  /* 声明该元素为容器，基于行内尺寸（宽度）触发查询 */
  container-type: inline-size;
  container-name: list-wrapper;
}

/* 直接基于容器宽度写响应式规则，自动适配单/双列表场景 */
@container list-wrapper (min-width: 600px) {
  .list-item {
    padding: 16px;
    font-size: 16px;
  }
}
@container list-wrapper (max-width: 599px) {
  .list-item {
    padding: 12px;
    font-size: 14px;
  }
}

逻辑说明：

• 单列表时.list宽度为100%屏幕宽，屏幕宽度到600px时容器宽度刚好触发断点
• 双列表时.list宽度为50%屏幕宽，屏幕宽度到1200px时容器宽度才会到600px触发断点，完全符合你要的阈值翻倍效果
• 后续如果有三列表、四列表的需求，不需要修改任何响应式规则，自动适配容器宽度

方案2：SCSS Mixin生成双套规则（兼容低版本浏览器，纯CSS实现） #

如果需要兼容不支持容器查询的旧浏览器，可以用SCSS的mixin自动生成两套对应不同断点的规则，避免重复代码：

// 定义常规断点
$breakpoints: (
  'min_600': 600px,
  'min_850': 850px,
  'min_1024': 1024px,
  'max_599': 599px,
  'max_400': 400px
);
// 定义双列表场景的翻倍断点
$double-breakpoints: (
  'min_600': 1200px,
  'min_850': 1900px,
  'min_1024': 2048px,
  'max_599': 1198px,
  'max_400': 800px
);

// 响应式mixin，自动生成单/双列表对应的规则
@mixin respond-to($bp-name) {
  $bp-value: map-get($breakpoints, $bp-name);
  $double-bp-value: map-get($double-breakpoints, $bp-name);
  // 判断是min-width还是max-width规则
  @if str-slice($bp-name, 0, 3) == 'min' {
    // 单列表规则
    @media only screen and (min-width: $bp-value) {
      .one-list & {
        @content;
      }
    }
    // 双列表规则
    @media only screen and (min-width: $double-bp-value) {
      .two-list & {
        @content;
      }
    }
  } @else if str-slice($bp-name, 0, 3) == 'max' {
    // 单列表规则
    @media only screen and (max-width: $bp-value) {
      .one-list & {
        @content;
      }
    }
    // 双列表规则
    @media only screen and (max-width: $double-bp-value) {
      .two-list & {
        @content;
      }
    }
  }
}

// 实际使用示例
.list-item {
  // 通用样式
  display: flex;
  align-items: center;
  // 响应式样式
  @include respond-to('min_600') {
    padding: 16px;
    font-size: 16px;
  }
  @include respond-to('max_599') {
    padding: 12px;
    font-size: 14px;
  }
}

这个方案会在编译阶段生成两套独立的媒体查询规则，分别对应one-list和two-list类，不会互相干扰，运行时会自动根据DOM上的类匹配对应样式。

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