有人可以解释为什么原生 css 变量在媒体查询中相互抵消吗？

Question

所以我正在尝试以角度制作响应式调整大小的帖子组件，并尝试更改不同屏幕尺寸的尺寸，例如使帖子在 4k 上看起来更大。
我对此的尝试是原生 css 变量（首先尝试使用 sass 变量，但后来了解到因为它只是一个预处理器，所以它不会是动态的，这完全有意义）。 我有多个针对不同屏幕尺寸的媒体查询，并且我有一个“调整大小变量”，它会根据不同的查询而变化。 使用一个查询，一切都可以正常工作，但是一旦我有第二个查询更改了变量，它似乎不再起作用了吗？ 我找不到任何解释这一点的东西，我真的很想了解这一点，所以有人可以向我解释一下吗？

代码（简化）：

.post{
  --header-height: 100px;
  --size-factor: 1;
  .posthead{
    height: calc(var(--header-height) * var(--size-factor);
    .{
      img{
        max-height: calc(var(--header-height) * var(--size-factor);
        max-width: calc(var(--header-height) * var(--size-factor);
      }
    }
}

// 4K
@media only screen and (min-width: 4092px){
    .post{
        --size-factor: 2.5;
    }
}

// 2K
@media only screen and (min-width: 2560px){
    .post{
        --size-factor: 1.5;
    }
}

当我只有 4k 的查询并在 4k 模式下检查时，一切看起来都很好并且可以调整大小。 但是，一旦我有 2k 查询，两者都不会工作。

注意：
这些值仅用于测试。显然我还没有找到合适的号码。

Answer 1

首先，您的任何calc 语句的末尾都没有右括号。

尝试使用 rem 单位而不是 px。

html, body {
  // Set size of the rem unit
  font-size: 16px
}
    
.post {
  .posthead {
    // 6 * 16px = 96px;
    height: 6rem;
    
    img {
      width: 100%;
    }
  }
}

// 2K
@media only screen and (min-width: 1920px) {
  .post {
    .posthead {
     height: 9rem;
    }
  }
}

// 4K
@media only screen and (min-width: 2560px) {
  .post {
    .posthead {
     height: 15rem;
    }
  }
}

2K 和 4K 分辨率（如果您想这样称呼它们）更多地取决于 px 高度的数量，因为还有宽屏幕。无论如何，您需要在您定位的屏幕尺寸下超过 1 个尺寸。因此，例如，如果您希望在 4K 屏幕上显示某些内容，则设置 min-width: 2560px 而不是 4092px 这是“8K”屏幕（如果您遵循该逻辑，则应为 3840px，因为原生 4K 分辨率为 3840x2160px） .