动态转换为CSS内部的PX

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（gap））：

@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))

https://developer.mozilla.org/en-us/docs/web/css/calc

Answer 2

以获取PX中的EM值。设置车身的默认字体大小（浏览器的默认字体大小为16px）。

EM值复合元素的嵌套，请参阅MDN文档（下面给出的链接）。

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

1 em = 16px.

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

3*250px + 48px = 798px.

请查看MDN的这篇文章：https：//developer.mozilla.org/en-us/docs/web/css/font-size#ems

和W3Schools的这篇文章（带有EM的字体大小）：https：//www.w3schools.com/css/css_font.asp