Главная » Раздел uCoz » Скрипты и модификации для Ucoz


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

988
10 из 10
Проголосовало: 5






Плагин 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 2126
Шаблоны форумов Ucoz 28
Шаблоны сайтов Ucoz 433
Авторство Webo4ki 309
php скрипты для ucoz 57
Графика для uCoz 40
Мини-чат
Гость, авторизуйся и общайся в чате...
Последние комментарии
  • dalamkontak написал:
    • Попробуйте социальную сеть Dalam Kontak !
    Сайт сети: Dkon.app
  • mrnoobsky написал:
    • Это моя работа, которая велась давольно таки давно smile Времени было мало, поэтому я скачал полностью все, что было и сделал архив happy
  • Snoopak написал:
    • 111 мегабайт? wtf? Что в архив напихали?
  • mrnoobsky написал:
    • Левое меню это BLG. Возможны какие-то баги, но в целом все должно работать корректно!
  • geleson2222 написал:
    • ?
    Последние темы
    Опрос
    541
    А
    Р
    Оцените новый дизай:)
    Статистика
    Анализ интернет сайта
    0
    онлайн
    		 0
    наших
    		 0
    чужих
    Онлайн всего: 1
    Гостей: 1
    Пользователей: 0
    0
    Сегодня были
    Друзья сайта:
    Связаться с администратором для дружбы! В Вовчик
    Nk-CS.Ru - Лучшие шаблоны для uCoz n na3uTuB4uk94
    Web-мастер системы uCoz R Roman_Domnin
    Связаться с администратором для дружбы! В Вовчик
    Связаться с администратором для дружбы! В Вовчик
    Топ пользователей: