为什么媒体查询中定义的原生CSS变量会相互覆盖导致失效？

问题原因 #

1. 存在多处CSS语法错误 #

你的代码存在多个语法问题，单条媒体查询时浏览器容错机制可能让部分规则生效，新增第二条后整体语法解析失败，导致所有规则失效：

• 所有calc()表达式缺少右闭合括号
• .posthead下存在非法的.{无效规则
• 最外层.post选择器缺少闭合大括号

2. 媒体查询顺序错误 #

min-width媒体查询需要按数值从小到大排列，你当前把阈值更高的4K规则写在2K前面，会导致4K屏幕同时命中两条规则，后面的2K变量赋值会覆盖4K的赋值，无法得到预期的2.5倍缩放。

修正后代码 #

.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));
    }
  }
}

// 2K（阈值小的写前面）
@media only screen and (min-width: 2560px){
    .post{
        --size-factor: 1.5;
    }
}

// 4K（阈值大的写后面，高分辨率下会覆盖前面的赋值）
@media only screen and (min-width: 4092px){
    .post{
        --size-factor: 2.5;
    }
}

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