Вы находитесь здесь:Плагины jQuery»liFontResponsive - jQuery Font Responsive или адаптивный текст на jQuery

liFontResponsive - jQuery Font Responsive или адаптивный текст на jQuery

Четверг, 15 Январь 2015 19:43 Автор 

liFontResponsive - jQuery Font Responsive или адаптивный текст на jQuery

Плагин liFontResponsive адаптирует размер шрифта под ширину окна браузера.

Например ваш макет нарисован шириной 1920px и в нем есть заголвки размером шрифта 40px. Плюс ваш сайт должен быть адаптивным.
Обычно в таких случаях для адоптивности текстовых блоков используют @media-запросы, но используя плагин «liFontResponsive» @media-запросы вам не нужны.
Вы устанавливаете вашим блокам тот размер шрифта который прописан в дизайне и при инициализации задаете ширину, актуальную для данного размера шрифта.

А для того чтобы размер шрифта не уменьшался до нечитабельного размера используем параметры "minwidth" или "minsize".
Для удобства эти параметры можно задавать через атрибуты прямо в текстовом блоке

Ниже находится пример:

Пример

  
<head>

  <link rel="stylesheet" href="#">
  <script src="/js/jquery-1.9.0.min.js"></script>
  <script src="/js/jquery.liFontResponsive.js"></script>
  
  <script>
    $(window).load(function(){
      $('.anyclass').liFontResponsive({
        actualwidth:'1900'
      });
    })
  </script>
  
  <style>
    .anyclass {font-size:40px}
  </style>
  
</head>  
<body>

  <p class="anyclass" data-minsize="12">текст</p>
  
</body>  

Пример работы на JSFIDDLE

Подключаемые файлы

   
<link rel="stylesheet" href="#">
<script src="/js/jquery-1.9.0.min.js"></script>
<script src="/js/jquery.liFontResponsive.js"></script>
    

Инициализация плагина. Вариант №1

<script>
    $(window).load(function(){
      $('.anyclass').liFontResponsive({
        actualwidth:'1900',
        minsize:12,
        maxsize:40,
        minwidth:0
      });
    })
</script>
<p class="anyclass">текст</p>
    

Инициализация плагина. Вариант №2

<script>
    $(window).load(function(){
      $('[data-actualwidth]').liFontResponsive();
    })
</script>
<p data-actualwidth="1900" data-minsize="12" data-maxsize="40" data-minwidth="0">текст</p>
    

Все параметры указывать не обязательно. Можно обойтись только одним "data-actualwidth"

Параметры

Option Default value Datatype Description
actualwidth 1900 Number Указывает ширину экрана, которая соответсвует установленному размеру шрифта в данном блоке.
Можно указывать атрибутом: <p data-actualwidth="1900">текст</p>
Может принимать значения: любое целое число
minwidth 0 Number Указывает минимальную ширину экрана, за пределами которой текст перестанет адаптироваться.
Можно указывать атрибутом: <p data-minwidth="800">текст</p>
Может принимать значения: любое целое число
minsize 0 Number Указывает минимальный размер шрифта, за пределами которого текст перестанет адаптироваться.
Можно указывать атрибутом: <p data-minsize="11">текст</p>
Может принимать значения: любое целое число
maxsize 999 Number Указывает максимальный размер шрифта, за пределами которого текст перестанет адаптироваться.
Можно указывать атрибутом: <p data-maxsize="40">текст</p>
Может принимать значения: любое целое число

Методы

destroy()

Удалит все изменения созданные плагином

Пример кода

$('.anyclass').liFontResponsive('destroy');

BugFix

14.01.2015 - Первый релиз

Прочитано 9939 раз Последнее изменение Среда, 04 Февраль 2015 20:44
Оцените материал
(0 голосов)

Комментарии   

 
Олег
# Олег 23.10.2016 03:49
В отличии от fittext этот плагин позволяет использовать одинаковые размеры.В бутсрапе Допустим нам нужен определенный размер текста в заголовке на всю ширину, а потом тот же размер но уже в колонке, fittext урежет этот размер под ширину колонки, а этот плагин нет! Спасибо!
Ответить | Ответить с цитатой | Цитировать
 
 
Олег
# Олег 23.10.2016 04:31
Добавить более плавный и точный ресайз вообще будет огонь!
Ответить | Ответить с цитатой | Цитировать
 
 
Олег
# Олег 23.10.2016 05:59
и добавить maxwidth=)
Ответить | Ответить с цитатой | Цитировать
 
Онлайн-конструктор українського орнаменту

Чем вы можете помочь?

1. Разместить ссылку на своем сайте
Если вы ведете блог или у вас есть сайт - поставьте ссылку на www.masscode.ru. Скопируйте этот код:

<a href="/" title="Плагины, сниппеты и пользовательские скрипты на jquery" target="_blank">Плагины, сниппеты и пользовательские скрипты на jquery</a>

2. Поддержать проект финансово
Вы можете сделать добровольное пожертвование

AUH: U878157792792
USD: Z821422743261
RUB: R360648948582
EUR: E298388086680

Свежие материалы

Последние коментарии

Вы находитесь здесь:   ГлавнаяjQueryliFontResponsive - jQuery Font Responsive или адаптивный текст на jQuery