Адаптивный текст при изменении ширины браузера

525
10 из 10
Проголосовало: 4






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

Установка:

Для начала подключим скрипт:

Код

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="jquery.fittext.js"></script>
<script>
  jQuery("#responsive_headline").fitText();
</script>


Теперь ваш текст становится адаптивным. По умолчанию его размер равен 1/10 от ширины элемента текста.
Но у скрипта есть несколько настроек, позволяющих регулировать адаптивность текста.

Компрессор

Если вам не нравится качество преобразования, то можете воспользоваться специальным параметром компрессора. По умолчанию 1.

Код
jQuery("#responsive_headline").fitText(1.2); // более жёсткое изменение размера  
  jQuery("#responsive_headline").fitText(0.8); // более мягкое изменение размера


minFontSize & maxFontSize

Так же вы можете определить минимальный и максимальный размер текста, которые не будет превышен. Для этого воспользуйтесь параметрами: minFontSize и maxFontSize.

Код
jQuery("#responsive_headline").fitText(1.2, { minFontSize: '20px', maxFontSize: '40px' })


CSS настройки

Убедитесь, что контейнеру для текста задана ширина!
У элементов с display: inline нет ширины. Используйте display: block или display: inline-block+ конкретную ширину (к примеру width: 100%).
При использовании position:absolute, так же нужно указать конкретное значение ширины.
Автор публикации: Загрузка
Загрузка
Вовчик, это его n материал
Источник: http://webo4ka.ru/
  • Всего комментариев: 1

iPorn
0
iPorn написал: Написано 29 Февраля 2016 в 20:17
Комментарий №1
А разве так нельзя, при помощи css?
Код
@media only screen and (max-width: 1600px) {
p {letter-spacing: 5px;}
}
@media only screen and (max-width: 1200px) {
p {letter-spacing: 4px;}
}
@media only screen and (max-width: 980px) {
p {letter-spacing: 3px;}
}
@media only screen and (max-width: 460px) {
p {letter-spacing: 2px;}
}

и тд.

  • Оставить комментарий:
Добавлять комментарии могут только зарегистрированные пользователи.
Регистрация | Вход
Меню сайта
Категории
Для помощи создания сайта uCoz 25
Скрипты и модификации для Ucoz 2115
Шаблоны форумов Ucoz 28
Шаблоны сайтов Ucoz 431
Авторство Webo4ki 309
php скрипты для ucoz 57
Графика для uCoz 40
Мини-чат
Последние комментарии
Добрый вечер.Подскажите,пожалуйста: как сделать, чтобы второй или третий набор смайлов заменить своими.
Вы сами себе пишите?
  • CbIPoK2513 написал:
  • Скрипт хорош, уже подстроил свой сайт под него :3
  • gefest35 написал:
  • Супер)))!пасиб за работу!!!
  • sasha2016tv написал:
  • Хороший скрипт
    Последние темы
    Опрос
    442
    А
    Р
    Оцените новый дизай:)
    Статистика
    Анализ интернет сайта
    0
    онлайн
    0
    наших
    0
    чужих
    Онлайн всего: 2
    Гостей: 2
    Пользователей: 0
    0
    Сегодня были
    Топ пользователей: