Я немного опаздываю здесь, я не получаю за это столько уважения, я просто делаю сочетание ответов ниже, потому что я был вынужден сделать это для проекта.
Итак, чтобы ответить на вопрос: не существует такой вещи, как это свойство CSS . Я не знаю почему, но я думаю, что это потому, что они боятся злоупотребления этим свойством, но я не нашел ни одного варианта использования, где это могло бы стать серьезной проблемой.
Как бы то ни было, каковы решения?
Два инструмента позволят нам сделать это: медиа-запросы и свойство vw.
1) Существует "глупое" решение, состоящее в том, чтобы делать медиа-запрос для каждого шага в нашем CSS, изменяя шрифт с фиксированной суммы на другую фиксированную величину. Это работает, но это очень скучно, и у вас нет гладкого линейного аспекта.
2) Как объяснил Почти Питт, для минимумов есть блестящее решение:
font-size: calc(7px + .5vw);
Минимум здесь будет 7 пикселей в дополнение к 0,5% ширины обзора.
Это уже действительно круто и в большинстве случаев работает . Для этого не требуется никаких медиа-запросов, вам просто нужно потратить некоторое время на поиск нужных параметров.
Как вы заметили, это линейная функция, базовая математика научит вас, что две точки уже находят вам параметры. Затем просто исправьте размер шрифта в пикселях, который вы хотите для очень больших экранов и для мобильной версии, а затем рассчитайте, хотите ли вы использовать научный метод. Подумал, это совершенно не обязательно и можно просто попробовать.
3) Предположим, у вас есть очень скучный клиент (вроде меня), который абсолютно хочет, чтобы заголовок состоял из одной строчки и не более. Если вы использовали решение Почти Питт, то у вас проблемы, потому что ваш шрифт будет продолжать расти, и если у вас есть контейнер с фиксированной шириной (например, начальная загрузка останавливается на 1140 пикселей или что-то в больших окнах). Здесь я предлагаю вам также использовать медиа-запрос. Фактически вы можете просто найти максимальное значение размера в пикселях, которое вы можете обработать в своем контейнере, прежде чем аспект станет нежелательным (pxMax). Это будет ваш максимум. Затем вам просто нужно найти точную ширину экрана, которую вы должны остановить (wMax). (Я позволяю вам самостоятельно инвертировать линейную функцию).
После этого просто сделай
@media (min-width: [wMax]px) {
h2{
font-size: [pxMax]px;
}
}
Тогда он станет совершенно линейным, и размер вашего шрифта перестанет расти! Обратите внимание, что вам не нужно помещать ваше предыдущее свойство css (calc ...) в медиа-запрос под wMax, потому что медиа-запрос считается более важным и он перезапишет предыдущее свойство.
Я не думаю, что для этого полезно делать фрагмент, так как у вас возникнут проблемы с отображением его на весь экран, и в конце концов, это не ракетостроение.
Надеюсь, это может помочь другим, и не забудьте поблагодарить почти Питта за его решение.