Решение Pure-CSS с calc(), единицами CSS и математикой

Это точно не то, что ОП спрашивает, но может сделать чей-то день.

Я пришел, наконец, для получения чистого CSS-решения для этого, используя calc() с разными единицами. Вам понадобится некоторое базовое математическое понимание формул, чтобы выработать выражение для calc().

Когда я это проработал, мне пришлось получить отчетный заголовок с полной шириной страницы с несколькими дополнениями нескольких родителей в DOM. Я буду использовать мои значения здесь, замените их на свой.

К математике

Вам понадобится:

• красиво скорректированное соотношение в некоторой области просмотра , Я использовал 320px, таким образом, я получил 24px высокий и 224px широкий, поэтому соотношение составляет 9.333 ... или 28/3
• ширина контейнера, у меня была padding: 3em и полная ширина, так что это дошло до 100wv - 2 * 3em

X - это ширина контейнера, поэтому замените его собственным выражением или настройте значение, чтобы получить полнотекстовый текст. R - отношение, которое у вас будет. Вы можете получить его, отредактировав значения в каком-либо окне просмотра, проверив ширину и высоту элемента и заменив их собственными значениями. Кроме того, это width / heigth;)

x = 100vw - 2 * 3em = 100vw - 6em
r = 224px/24px = 9.333... = 28 / 3

y = x / r
  = (100vw - 6em) / (28 / 3)
  = (100vw - 6em) * 3 / 28
  = (300vw - 18em) / 28
  = (75vw - 4.5rem) / 7

И звук! Это сработало! Я написал

font-size: calc((75vw - 4.5rem) / 7)

в свой заголовок, и он прекрасно поменялся в каждом окне просмотра.

Но как это работает?

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

Отношение. Получение ширины и высоты в одном окне просмотра показало мне соотношение, с которым можно играть, и с коэффициентом я знаю, какая высота должна быть в другой ширине видового экрана. Вычисление их вручную потребует много времени и, по крайней мере, возьмет много полос пропускания, так что это не очень хороший ответ.

Заключение

Интересно, почему никто не понял это, а некоторые люди даже говорят, что это невозможно будет переделать с помощью CSS. Я не люблю использовать Javascript в настройке элементов, поэтому я не принимаю ответы JS или даже jQuery, не копая больше. В целом, хорошо, что это выяснилось, и это один шаг к реализации чистых CSS в дизайне сайтов.

Извиняюсь за любое необычное соглашение в моем тексте, я не являюсь носителем языка на английском, а также совершенно новым для написания SO-ответов.

Edit: следует также отметить, что мы имеют злые полосы прокрутки в некоторых браузерах. Например, при использовании Firefox я заметил, что 100vw означает полную ширину окна просмотра, проходящую под полосой прокрутки (где контент не может расширяться!), Поэтому текст ширины полосы пропускания должен быть тщательно окрашен и желательно проходить тестирование со многими браузерами и устройствами.