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


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

485
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 2110
Шаблоны форумов Ucoz 28
Шаблоны сайтов Ucoz 431
Авторство Webo4ki 309
php скрипты для ucoz 57
Графика для uCoz 40
Мини-чат
Последние комментарии
  • LeKcUs написал:
  • В самый конец просто добавьте вот такие теги... И у Вас не будет больше возникать вопросов! cry

    <!-- </popup> -->$POWERED_BY$<!-- <popup> -->
  • invitesystem написал:
  • Скачал архив, залил сайт, но проблема с кодом для вставки в конструктор шаблонов. Какие-то в нём знаки вопроса и без обязательного $POWERED_BY$
  • Marishka написал:
  • Можно, включите фантазию. Бесплатно никто ничего делать не будет.... Данный скрипт то написали так как попросили happy
  • BLAzER написал:
  • А на условных операторах это не сделать?
  • Вовчик написал:
  • Кто-то недавно об этом спрашивал
    Последние темы
    Опрос
    226
    А
    Р
    Что произойдёт: $("#...
    Статистика
    Анализ интернет сайта
    0
    онлайн
    0
    наших
    0
    чужих
    Онлайн всего: 2
    Гостей: 2
    Пользователей: 0
    0
    Сегодня были
    Топ пользователей: