如何用CSS基于屏幕高度计算宽度？该需求是否可行？

嘿，这个需求完全可以实现，但你当前的写法在CSS里是行不通的——CSS并没有提供直接引用另一个属性计算结果的语法。不过别担心，我们有几种简单的方案能达成目标：

方法1：使用CSS自定义属性（变量） #

这是最直观且易维护的方式，先把计算好的高度值存储在一个变量里，然后在宽度计算中复用这个变量：

.myClass {
  /* 先将计算后的高度存入自定义属性 */
  --calculated-height: calc(50% - 33.5px);
  /* 应用高度 */
  height: var(--calculated-height);
  /* 基于高度变量计算宽度 */
  width: calc(var(--calculated-height) * 1.3);
}

这种方法的优势在于，如果后续需要调整高度的计算逻辑，只需要修改--calculated-height的值即可，不用重复修改宽度的计算式，非常适合复杂的样式场景。目前所有现代浏览器都支持CSS自定义属性，兼容性没问题。

方法2：直接重复高度计算式 #

如果你的计算逻辑比较简单，也可以直接在宽度属性里重复高度的计算表达式：

.myClass {
  height: calc(50% - 33.5px);
  width: calc((50% - 33.5px) * 1.3);
}

这种写法不需要额外定义变量，适合简单场景，但如果计算式比较复杂，后期维护起来容易出错（比如修改高度时忘记同步修改宽度）。

注意事项 #

• 确保父元素的高度是确定的：如果你的50%是相对于父元素的高度，那父元素必须有明确的高度值（比如设置了height: 100vh或者固定高度），否则50%会失效。
• 单位一致性：在calc()中进行乘除法时，要保证参与计算的值单位一致（这里高度是带单位的，乘以1.3后单位会自动保留，无需额外处理）。

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