Размер шрифта

[raptor-dm]

Всем привет) Можно ли сделать как-нибудь, чтобы при сужении экрана или блока, текст плавно уменьшал размер шрифта ? Так сказать резинка или адаптив.

[Aleksandr.L]

http://jsfiddle.net/g1cLzm0e/

[raptor-dm]

спасибо)

[pangurban]

стоит помнить об этом

Тыц

[positivecrash]

Можно еще в rem, но также ниже IE8 не будет работать: http://caniuse.com/#search=rem

[SelenIT]

rem не удовлетворяет требованию, чтобы размер подстраивался

плавно

 

Так-то с кучей media queries для разных значений ширины с шагом, скажем, 50px, можно и в пикселях размеры задавать. И будет работать в тех же IE9+. Но писать (особенно если без препроцессоров) придется мнооогоо...

[positivecrash]

Нет, конечно, не стоит мучить себя, браузер и пользователя изменением размера с шагом в 50px))))

 

Интересная единица измерения, как-то на нее раньше внимания особого не обращала из-за багов, о которых пишут в связи с ней. И да, если нужно именно плавно, то это выход. 

 

Однако:

 

1. Все же адаптивное изменение размеров шрифта немаловажную роль играет в мобильных устройствах, а vw только вот начался поддерживаться тем же андроидом. На моем телефоне (не очень-то и древнем), например, я даже не представляю как будет выглядеть, если не написать кучу fallback'ов с помощью media queries

 

2. Подскажите, пожалуйста, как использовать vw на практике? Возможно есть какие-то готовые проекты, использующие vw?

 

К примеру с rem я делаю так (ну это грубо говоря): проставляю html font-size в % (используя максимум 3 media queries), затем просто проставляю значения элементам в px как в макете, используя написанный уже ранее для себя миксин в Compass'е. Это позволяет перенести размеры шрифтов в точности как в макете (который обычно в реальности рисуется только на 1000px), в то же время реализуя некоторую адаптивность шрифта под ширину браузера. Очень удобно лично для меня Подробнее про этот способ можно прочитать тут

Edited October 17, 2014 by positivecrash