Как сделать все шрифты на странице полностью зависимыми от размера окна?

Question

[Георгий Кузнецов]

Допустим есть такая вырезка из кода (не обращайте внимание на "classname", этот код из реакта) :

<div className="header-main-lower">
         <h1 className=" "> Заголовок </h1>
         <p className=" "> Текст </p>
</div>

Как надо прописать класс CSS чтобы оба элемента полностью подстраивались под размеры окна? Варианты вроде использования процентов, em и прочего не срабатывают.

Comments

[Ankhena]

Задать размеры в vw. Или в vmin, vmax, смотря какого эффекта вы хотите достичь.
Если текст заранее неизвестен, то высчитывать на js.
Или использовать готовые скриптики типа fit-text.

[Георгий Кузнецов]

Ankhena, а если я например хочу использовать понижающий коэффициент для текста при достижении X ширины, какой псевдокласс CSS можно использовать для этого?

[Ankhena]

Георгий Кузнецов,

какой псевдокласс CSS

Никакой. Почитайте что такое псевдоклассы.

Для этого используют @media или clamp (min, max)

[Георгий Кузнецов]

Ankhena, спасибо, сработало

Answer 1

[true]

два варианта -

для каждого размера сделать свой стиль
мосштабировать контент через transform scale

Answer 2

[Евгений Запунный]

указать

<meta name="viewport" content="width=device-width, initial-scale=1.0">

в index.html
а еще лучше укажи что сделать нужно, в чем проблема?

Answer 3

[ambisinister One]

inherit

Answer 4

[Vyach Gor]

то что вам нужно - link