Полноэкранный, масштабируемый div, соблюдающий пропорции ширины, высоты и текста

[ZmeeeD]

Помню я как делал полностью масштабируемы штуки
Но найти применения не смог более чем пока для фана

[oe24]

Вот так и картинка у Вас в посте — 1,27 Мб!!!

[increment_of_panfil]

Не обратил внимания, извиняюсь.
В следующий раз будут с меньшим весом.

[ishaba]

а если так сделать? jsfiddle.net/CPXfn/1/

[increment_of_panfil]

Ваш пример не работает так как у меня, текст не ресайзится, а блок изменяет масштаб только при движении ширины.

[Utter_step]

Возможно, так слегка короче:
jsfiddle.net/utterstep/XJyXj/

P.S. кроссбраузерные префиксы не добавлял.
P.P.S. 700 и 500 собственно и задают отношение сторон.

[Utter_step]

И ресайзится всё в диве, независимо от того, что мы туда запихнём.

[increment_of_panfil]

Отличный вариант!
Я почему то не стал использовать transform scale, не хотелось к нему прибегать.

[AntonDiaz]

Правильно сделали, что scale не использовали. Рендерится всё ужасно.

[Utter_step]

Почему ужасно?

Посмотрел на большинстве современного — вроде оба варианта примерно одинаково работают.

[spmbt]

Где же elem.style.fontSize? С ним было бы действительно сложно.

[Yan_Alex]

Тфу ты, я думал на CSS, тогда уж на жКвайри это было бы гораздо короче.… говорили же мне читать теги *бурчит под нос закрывая вкладку*

[LegoMushroom]

можно попробовать и чистым CSS-ом

[increment_of_panfil]

На jquery таких примеров и так хватает, я задавался целью написать это на чистом javascript-е.

[sarlv]

А как насчет медиа кверис? Не уверен на все 100%, но думаю, что можно было бы обойтись без js.

[increment_of_panfil]

Я, собственно, изначально и делал на media queries и результат был не такой как мне нужно. Там если и задавать изменение размера текста, то изменение будет происходить скачкообразно, иначе придётся задавать изменение размера шрифта для каждой ширины и высоты экрана, попиксельно.

[sarlv]

Вот тут есть интересные мысли: css-tricks.com/viewport-sized-typography/

[increment_of_panfil]

Я описанным способом и сделал. Внимательно посмотрите функцию resizeFont. Сама функция нужна лишь для изменения координат 'vw' и 'vh', когда сжимается ширина вьюпорта или высота. В описанном примере текст взаимодействует лишь с шириной экрана, а в моём ещё и с высотой.

[realcomp]

Работает во всех последних версиях браузеров

Не во всех: о(
FF 22
1920x1080

[increment_of_panfil]

Я проверил во всех последних версиях, если у вас не работает, значит у вас не последняя версия.