如何通过JS修改CSS类属性，让.cards基于屏幕尺寸适配且作用于新元素

方法1：使用CSS视口单位（最简便，无JS依赖） #

直接用CSS的vh（视口高度的1%）单位结合calc()计算，所有.cards元素（包括后续动态创建的）会自动应用样式，完全不需要JavaScript，性能最优：

.cards {
  width: calc(100vh / 15); /* 取屏幕高度的1/15作为宽度 */
  height: calc((100vh / 15) * 1.5); /* 宽度的1.5倍作为高度 */
}

方法2：CSS变量配合JS动态调整（适合需要修改比例的场景） #

先在全局定义CSS变量，再在.cards类中引用，后续通过JS修改变量即可批量更新所有元素样式：

1. 定义CSS变量与样式：

:root {
  --card-width-denominator: 15; /* 控制比例的分母 */
}

.cards {
  width: calc(100vh / var(--card-width-denominator));
  height: calc((100vh / var(--card-width-denominator)) * 1.5);
}

2. 用JS动态修改变量（比如需要把比例改成1/10）：

document.documentElement.style.setProperty('--card-width-denominator', '10');

修改后所有已存在和后续创建的.cards元素都会自动应用新样式。

方法3：直接修改样式表规则（复杂场景适用） #

通过JavaScript找到样式表中.cards的规则并修改，后续创建的元素会自动继承更新后的样式：

// 遍历所有样式表找到目标规则
for (const sheet of document.styleSheets) {
  for (const rule of sheet.cssRules) {
    if (rule.selectorText === '.cards') {
      // 计算并设置新的宽高
      const width = window.screen.height / 15;
      rule.style.width = `${width}px`;
      rule.style.height = `${width * 1.5}px`;
      break;
    }
  }
}

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