Question

我需要根据上下文了解CSS样式表中的当前em。有可能吗？

我要计算两项的像素数：一项以像素为单位，另一项为em：

--item-min-width: 250px;
--gap: 3em; (note: this might be different and is not known until runtime)
--max-number-items: 3;

现在我需要这三个项目的总宽度，加上空隙。像这样的东西（这当然是行不通的，因为我不能添加像素（item-min_width）和em（间隙））：

@media (min-width: calc(
  var(--max-number-items) * var(--item-min-width) + var(--gap)
))

目标是将间隙（3em）动态转换为像素。是否可以找出元素的当前em？

Answer 1

您无需转换单位，calc可以处理：

calc(100% + 10px)
calc(2rem - 1%)
calc(var(some-var) + var(another-var))

Answer 2

以px为单位获取em值。设置正文的默认字体大小（浏览器的默认字体大小为16px）。

带有元素嵌套的EM值复合物，请参阅MDN文档（下面提供链接）。

因此，假设您已将默认字体大小设置为16px。

1 em = 16px.

现在您的差距为3em。因此3 * 16px = 48px。

3*250px + 48px = 798px.

以及w3schools中的这篇文章（用Em设置字体大小）：https://www.w3schools.com/css/css_font.asp