Как реализовать max-font-size?

Я хочу указать свой размер шрифта с помощью vw, как в

font-size: 3vw;

Однако я также хочу ограничить размер шрифта, чтобы сказать 36px. Как я могу достичь эквивалента max-font-size, которого не существует, является единственной возможностью использования медиа-запросов?

Ответы

Ответ 1

font-size: 3vw; означает, что размер шрифта составит 3% от ширины области просмотра. Поэтому, когда ширина области просмотра составляет 1200 пикселей, размер шрифта будет равен 3% * 1200 пикселей = 36 пикселей.

Таким образом, максимальный размер шрифта 36 пикселей может быть легко реализован с помощью одного медиазапроса, чтобы переопределить значение размера шрифта по умолчанию 3vw.

Codepen demo (изменение размера браузера)

div {
  font-size: 3vw;
}
@media screen and (min-width: 1200px) {
  div {
     font-size: 36px;
  }
}

<div>hello</div>

Ответ 2

Другой способ медленно увеличивает размер шрифта, это не ограничивает максимальный размер шрифта, но даже на очень широких экранах он будет выглядеть лучше. Не отвечает на вопрос в идеальном виде, но его 1 строка...

font-size: calc(16px + 1vw);

Ответ 3

В какой-то момент значение font-size превышает шкалу 36px вправо, найдите это. Предполагая, что оно превышает значение width: 2048px:

@media screen and (min-width: 2048px) {
  .selector {
     font-size: 36px;
  }
}

Да, к сожалению, вам нужно использовать запросы @media. Надеюсь, это ничего не повлияет.

Ответ 4

Вот еще одна идея. Функция calc использует float двойной точности. Поэтому он имеет ступенчатую функцию около 1e18. Например,

width: calc(6e18px + 100vw - 6e18px);

Это будет привязано к значениям 0px, 1024px, 2048px и т.д. См. Перо https://codepen.io/jdhenckel/pen/bQNgyW

Функция шага может быть использована для создания значений абс и мин/макс с некоторыми умными математическими вычислениями. Например

max(x, y) = x - (x + y) * step(y - x)

Данный шаг (z) равен нулю, когда z <0, и равен 1 в противном случае.

просто идея, не очень практичная, но, может быть, интересно попробовать.