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 - Первый релиз
Комментарии
RSS лента комментариев этой записи