Адаптивный текст

#css

Можно ли на сегодняшний день добиться адаптивности для текста не используя кучу '@media'
запросов? 
    

Ответы

Ответ 1

Для font-size можно использовать несколько вариантов:

1. Использовать единицу измерения vw.
vw = 1 % от ширины пользовательской части окна браузера.

p {
  font-size: 10vw; // 10% от viewport
}


Поддержка браузеров vw

2. Использовать calc и vw

p {
  font-size: (calc(14px + 2 * ((100vw - 420px) / 860)))
}


Поддержка браузеров calc

Так или иначе нужно будет подбирать нужные размеры.

Так же, можно посмотреть небольшую библиотеку Rucksack, тут как раз используется
vw и calc


Ответ 2

Воспользуйтесь единицей измерения vw


  1vw = 1% от viewport width


Пример

h1 {
    font-size: 5.7vw;
}
h2 {
    font-size: 4.0vw;
}
h3 {
    font-size: 2.8vw;
}
p {
    font-size: 2.5vw;
}


Демо
https://css-tricks.com/examples/ViewportTypography/