Адаптивный размер шрифта

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

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

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

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

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

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

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

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

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

<script src="http://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 — наше спасение.

Комментарии:

  1. константин опубликовал комментарий 17 Ноябрь 2013, 02:05 #

    спасибо за статью

    | Ответить
  2. Алексей Меньшико опубликовал комментарий 15 Ноябрь 2015, 20:06 #

    …прошло ровно 2 года. но проблема все еще актуально и свойство calc()чет как-то не помогает))
    ЗЫ если вы указываете относительный путь к библиотеке, то не забывайте прилагать библиотеку к материалу и уточняйте этот момент.

    | Ответить
  3. helsik опубликовал комментарий 18 Июль 2016, 02:36 #

    здравствуйте, у меня joomla 2.5, я скачал скрипт закинул его в папку media/system/js в index.php добавил:
    “<script src=“http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js”></script>
    <script src=”/media/system/js/jquery.fittext.js”></script>
    <script> jQuery(”#fittext”).fitText(1.2, { minFontSize: ‘10px’, maxFontSize: ‘24px’ });
    </script>”
    и в нужном месте добавил ид вот-так: “<h1 id=”#fittext” style=“display: block;width: 100%;font-size:24px;color:#4A9710;font-family:Times New Roman;”>(062)348-10-50</h1>”
    и в итоге не работает.. что делаю не так?

    | Ответить
  4. helsik опубликовал комментарий 19 Июль 2016, 01:55 #

    в id=”#fittext” убрал #, но всеравно не пашет..

    | Ответить
    • Андрей опубликовал комментарий 22 Июль 2016, 14:59 #

      Написано же “class=“fittext”, а вы ему id ставите. А такого в скрипте нет.

      | Ответить
Имя
e-mail
Сайт
Текст комментария: