Можно ли создать масштабировани текта, по ширине как в background-size?

Question

[Александр Иванов]

Допустим у меня есть блок с текстом.
Здесь картинка масштабируется под болк ->
professorweb.ru/my/javascript/jquery/level4/files/...
А вот сделать так, чтобы текст масштабировался? По одной из сторон.
Был блок маленький допустим 300px. текст был 40px напр.
Блок стал больше 600 и текст тоже 80...
Как то так.

Answer 1

[Eduards Vigulis]

Есть вот такая штука и/или копайте в эту сторону...

Comments

[Александр Иванов]

О. Крутая штука и полезная! Спасибо!

Answer 2

[Сергей Наломенко]

Если размер блока напрямую зависит от размера окна браузера, то можно использовать @media правила подобным образом:

@media screen and (max-width: 800px) {
    .my-class { font-size: 40px; }
}

@media screen and (max-width: 400px) {
    .my-class { font-size: 20px; }
}

В противном случае, если такие условия нужно задавать для конкретного блока/контейнера (div или другого), то тут из вариантов только JavaScript с коллбэком на ресайз элемента.

Пример с использованием jQuery:

$('.my-class').resize(function() {
    var width = $(this).width();
    if(width <= 400)
        $(this).css('font-size', '20px');
    else
        $(this).css('font-size', '40px');
});

Comments

[Александр Иванов]

Я так и думал. Просто дизайнеры бывают задают размер под разные разрешения таким образом 43,43 и 61,43 т.е. просто растянул под размер в фотошопе и не парится. Вот и приходят на ум похожие идеи...