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


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

439
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 24
Скрипты и модификации для Ucoz 2101
Шаблоны форумов Ucoz 28
Шаблоны сайтов Ucoz 429
Авторство Webo4ki 309
php скрипты для ucoz 57
Графика для uCoz 40
Мини-чат
Последние комментарии
как поставить свою ссылку и логотип
  • Сатурн-1 написал:
  • Похвально.
  • Winston888 написал:
  • Я не говорил что делаю только скрипты. Я делаю шаблоны, скрипты, адаптации с разных движков под ucoz и на оборот + я ещё и сам рисую. В данный момент занимаюсь дизайном для webo4ka сам рисую сам верстаю.
  • Сатурн-1 написал:
  • Заметь, мы делаем почти одну и ту же работу.
    Ты - скрипты, я -шаблон. И каждый делает это бесплатно, НО
    ты делаешь скрипты без шаблона, я делаю шаблон без скриптов (не считая основных).
    Я тоже могу сказать что твои скрипты не идеальны, но не буду т.к. даже не знаю какие из всех существующих твои.
    Поэтому ты не сравнивай скрипты и шаблоны да еще и на Ucoz'e, мы же не на хакатоне каком нибудь.
  • Winston888 написал:
  • Если бы я не добавлял бесплатные адаптации или скрипты бесплатно я бы наверное не стал бы комментировать ваш материал.
    Последние темы
    Опрос
    204
    А
    Р
    Что произойдёт: $("#...
    Статистика
    Анализ интернет сайта
    0
    онлайн
    0
    наших
    0
    чужих
    Онлайн всего: 4
    Гостей: 2
    Пользователей: 2
    0
    Сегодня были
    Топ пользователей: