Как правильно адаптировать такой блок?

Question

[Dvorak]

codepen.io/anon/pen/KzvYRW

Как правильно адаптировать блок так, чтобы большой и маленький тексты всегда отображались в одну строчку? Пробовал через media, но тогда выходит, что надо через каждые 100px уменьшать шрифт. Писать по 10 раз media для одного блока как-то не хочется. Как быть?

Comments

[Кирилл]

Если правильно понял, то должен подойти этот плагин - ruseller.com/adds.php?rub=11&id=2299

Answer 1

[Damir Aushenov]

font-size: 2vw;
Viewport Sized Typography

Answer 2

[amf1k]

почитать про относительные единицы (em и rem) и использовать их для font-size`а

Comments

[Dvorak]

Я понимаю, что rem - это размер относительно страницы html. Но я не понимаю, почему при изменении размера браузера не меняется размер, указанный в rem

[amf1k]

Ну на сколько я знаю, если не указывать в стилях у html - font-size, то он будет автоматически подставляться нужный, в зависимости от размера экрана, а т.к. у вас будет в относительных единицах, то все должно быть норм. Ну и ясно-понятно что он не будет прямо из коробки т.к. вам надо) искать другие пути решения и т.д. И потом почему 10 раз медиа запрос? Вроде меньше было стоп-разрешений или как их еще назвать)