Как установить максимальный размер элемента <h1>?

Question

У меня есть <h1 style="font-size:2.5vw;">Example</h1> в моем файле HTML. Я проверял, как он выглядит в разных размерах окна просмотра, используя 'Chrome DevTools' (инструменты разработчика Google Chrome).

Я обнаружил, что заголовок слишком велик по сравнению с остальными Содержимое в моем HTML, когда для устройства установлено значение «iPad Pro» (1024x1366).

Чтобы решить эту проблему, мне было интересно, есть ли способ установить максимальный размер для элемента заголовка при добавлении "font-size:2.5vw;" (мне нужно, чтобы он все еще реагировал на размер области просмотра)?

Я пытался добавить max-width://size в поле style элемента, но это не помогло разница.

ПРИМЕЧАНИЕ: Мой meta элемент выглядит так: <meta name="viewport" content="initial-scale=0.41, maximum-scale=1.0" />

Answer 1

CSS не имеет встроенного способа выполнения max-font-size или min-font-size, но некоторые обходные пути делают эту работу.

Один из способов использования media queries:

h1 {
  font-size: 30px;
}
@media screen and (min-width: 1600px) {
  h1 {
     font-size: 50px;
  }
}

Другим способом является использование max() или min() функций с окном просмотра vw unit:

font-size: min(max(30px, 3vw), 50px);

Answer 2

То, что вы ищете, это clamp

p { font-size: clamp(1rem, 2.5vw, 1.5rem); }

<p>
If 2.5vw is less than 1rem, the font-size will be 1rem.
If 2.5vw is greater than 1.5rem, the font-size will be 1.5rem.
Otherwise, it will be 2.5vw.
</p>

https://developer.mozilla.org/en-US/docs/Web/CSS/clamp