Appearance
Первые попытки резиновой, то есть, адаптирующейся к ширине экрана, верстки были аж в 2004-ом году, судя по чудом сохранившейся статье в блоге Man in Blue
Когда адаптивность стала входить в обиход (точкой отсчета принято считать эту статью Итана Маркотта, то есть 10 лет назад, мы использовали % и em в качестве единиц измерения для шрифтов и отступов. Чтобы увеличить или уменьшить шрифт, мы использовали media queries, которые позволяли задать font-size для body, от которого зависят все размеры, указанные в em-ах.
Верстальщику всё время нужно было подбирать определенную величину, при которой блоки не наезжали друг на друга, текст не выпячивал за пределы блока, учитывать читаемость и компоновку элементов для четырёх размеров экранов как минимум.
Все современные браузеры поддерживают vw и vh в качестве величин, относительных высоте и ширине viewport-а (окна браузера). Если вы потянете за угол окна браузера прямо сейчас, вы сможете заметить, что заголовок страницы будет плавно уменьшаться, это потому что его размер шрифта указан в vw. Раньше это можно было сделать, указав размер в процентах, но эти проценты считались от ширины блока.
Чтобы текст не ужимался до нечитабельного состояния, можно указать минимальный размер через calc():
h1 {
font-size: calc(1.3rem + 3.6vw);
}
Несмотря на то, что эта технология появилась 8 лет назад, вместе с CSS3 (одна из первых статей про vueport units), огромное число разработчиков до сих пор оперируют пикселями и, в лучшем случае, em. Оставим это на их совести и совести UX-специалистов, которые делают статичные макеты.
Почаще заходите сюда, и на Can I Use, и здесь и там очень много полезной и актуальной информации.
Да, читайте, пожалуйста, спецификацию!