Как получить результат без единиц измерения функции cal c ()

Question

Я использую этот расчет, чтобы получить жидкостную высоту линии на моей веб-странице:

line-height: calc(1.42em + (1.55 - 1.42) * ((100vw - 300px) / (1080 - 300)));

И математика является рабочим свойством, кроме случаев, когда я изменяю font-size указанного раздела c ( поскольку для сохранения отношения font-size / line-height необходимо указать line-height с числом без единицы).

Вопрос заключается в следующем: как получить результат без единицы расчет?

Я пытался удалить единицы em и px, но это нарушило бы эффект.

Если бы я не использовал этот расчет, я бы, вероятно, использовал что-то вроде :

body {
    font-size: 18px;
    line-height: 1.4;
}

Я могу получить функцию calc(), которая возвращает 18px, например. Но как мне заставить функцию calc() возвращать результат без единиц измерения (например, 1.4), когда я использую другие несколько единиц внутри нее. Любой способ преобразовать результат в число без единицы?

Это целое CSS:

:root {
    --font: calc(16.2px + (18 - 16.2) * ((100vw - 300px) / (1080 - 300)));
    --verti: calc(1.42em + (1.55 - 1.42) * ((100vw - 300px) / (1080 - 300)));
}

html {
    font-family: "Georgia";
    font-size: var(--font);
    line-height: var(--verti);
}

.small {
    font-size: 0.8em;
}

Это прекрасно работает. Но line-height класса .small слишком велик. И я могу либо сделать другую функцию calc() только для нее, либо сделать предварительный просмотр calc(), чтобы вернуть его значение с числом без единицы.

Answer 1

Невозможно получить значение без единицы из calc(), если у любого из ваших входов есть единицы.

Однако в данном конкретном случае с line-height следует отметить, что единица измерения без-значение line-height: 1.4 эквивалентно line-height: 140%. Аналогично 3.1 эквивалентно 310% и др. c. Вы должны иметь возможность изменить уравнение calc() для вывода нужного значения с помощью единицы %.

---

Редактировать: Кажется, что наследование ведет себя по-разному для значений без единиц измерения и процентов, поэтому используйте это подходить с осторожностью. Все должно быть в порядке, если вы избегаете указывать line-height на родительских элементах. https://developer.mozilla.org/en-US/docs/Web/CSS/line-height#Prefer_unitless_numbers_for_line -height_values ​​