На сегодняшний день сделать полностью адаптивный сайт не так уж и сложно. Для его разработки уже придуманы все инструменты, которые для этого нужны. Чего стоит только все, еще не принятые, нововведения новой версии стандарта CSS3. Такая штука, как @media query, вообще позволяет писать CSS-стили, адаптируя их к ширине, высоте и положению экрана.

Чего еще нужно для создания по-настоящему адаптивных сайтов? Оказывается не все еще возможно силами CSS. Как оказывается во всем этом разнообразии нету простой функции изменения размера шрифта в зависимости от ширины экрана. Сегодня и поговорим об этом.

Разве нельзя это сделать с помощью CSS?

Конечно же можно. Есть параметр или правильнее сказать первая функция для css – calc();, которая позволяет делать абсолютно любые вещи, но сегодня не о ней. Использовать ее конечно можно, но тогда стоит смириться с тем, что не во всех браузерах это будет работать. Точнее сказать, будет работать только в некоторых браузерах.

Заставить шрифт в определенном блоке менять размер шрифта можно несколькими способами, но я предпочитаю делать это только двумя: с использованием jQuery и без её использования. Если Вы не знаете что такое jQuery, то стоит посетить специализированные форумы.

Посмотреть о чем я вообще говорю и увидеть как всё это работает можно здесь.

Адаптивный размер шрифта с использованием jQuery

Если хочется почитать официальную документацию, то Вам сюда.

Для того, чтобы незамедлительно начать адаптивно изменять шрифт на своей странице, необходимо добавить на нее вот этот код:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="jquery.fittext.js"></script>
<script>
  jQuery(".fittext").fitText(1.2, { minFontSize: '20px', maxFontSize: '40px' });
</script>

Где 1.2 – пропорция изменения, minFontSize и maxFontSize – это соответственно минимальный и максимальный размеры шрифта. Проще некуда.

Текст, который нужно менять, помещаем в объявленный класс:

<div class="fittext">
  Тут может быть Ваш любой текст, который необходимо изменять в зависимости от ширины экрана.
</div>

Все просто.

Если jQuery не используется на сайте, что конечно является, наверно нонсенсом, чем часто встречающимся случаем, можно реализовать тоже самое и без jQuery.

Адаптивный размер шрифта БЕЗ использования jQuery

Официальная страница проекта на GitHub. О ней я рассказывать подробно не буду, так как ни разу не использовал, но не сказать о ней я не мог. Вдруг кому-то все же где-нибудь пригодиться.

P.S. Думается мне, что через 1-2 года мы забудем о всех этих JS-решениях и будем использовать calc(). Ну, а пока этого не случилось, JS — наше спасение.