Динамически конвертировать их в px внутри CSS?

Question

Мне нужно знать текущий em, основываясь на контексте, внутри таблицы стилей css.Это возможно?

Я хочу рассчитать количество пикселей для двух элементов: один в пикселях, а другой 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

Чтобы получить значение em в px.Установите размер шрифта по умолчанию для тела (браузеры имеют размер шрифта по умолчанию 16 пикселей).

Соединение значения EM с вложенностью элементов , см. Документы MDN (ссылка приведена ниже).

Итак, допустим, вы установили размер шрифта по умолчанию 16 пикселей.

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