Великий Путь Вебмастера от идеи до интернет бизнеса
Блог Романа Чуешова
Начни зарабатывать в интернете на создании сайтов и блогов

Создаем адаптивный размер шрифта на фреймворке bootstrap 3

Доброго времени суток, верные подписчики и гости моего обучающего блога. В сегодняшней публикации мы разберем с вами Bootstrap размер шрифта, а именно как создать адаптивный шрифт.

Я расскажу, какие элементы управления присутствуют в фреймворке для редактирования текста, каким образом видоизменяется текстовый контент при масштабировании и как сделать так, чтобы размер символов изменялся вместе с изменением размеров окна. Как обычно, я приведу примеры кода. А теперь за дело!

Все о Bootstrap Typography

В изучаемом фреймворке есть целый раздел, выделенный под редактирование и форматирование текстового контента. Для начала стоит отметить, что некоторые параметры, установленные по умолчанию в Бутстрапе, несколько отличаются от стандартных установок в браузерах. По ходу статьи вы сами заметите какие именно.

Итак, в Bootstrap 3 по умолчанию выставлен шрифт размером в 14 пикселей и межстрочным интервалом в 1.428.

Присутствуют все 6 уровней заголовков при этом первый уровень равен 36px, а шестой – 12px.

Что касается тега small, то его отображение несколько отличается от привычного нам в html. В данном случае этот элемент используется для создания вторичного текста в более светлых тонах. Для анализа протестируйте строки кода:

1
2
3
4
<div class="container">
  <h1>Первый заголовок <small>вспомогательный текст</small></h1>
  <p>Содержание абзаца.</p>
</div>

Интересным тегом является <mark>. Текст, обрамленный в такой парный элемент, выглядит так, будто выделен хайлайтером.

  <p>Предложение с <mark>важным</mark> словом.</p>

Не менее интересным, по моему мнению, является и элемент <abbr>. Как вы уже догадались, с его помощью можно расшифровывать аббревиатуры.

  <p>Вчера был замечен <abbr title="Неопознанный летающий объект">НЛО</abbr> прямо над столицей.</p>

Для того чтобы выделить, например, комбинацию клавиш, можно использовать тег <kbd>:

<p>Используйте <kbd>ctrl + U</kbd> для открытия исходного кода веб-страниц.</p>

Помимо перечисленных инструментов управления текстом, существуют также и классы, которые расширяют возможности фреймворка.

Наиболее интересные для текущей темы являются .lead и .pre-scrollable. Их описание я поместил в таблицу.

Класс Описание
.lead Выделяет некий параграф текста более крупным и жирным начертанием шрифта. При этом размер и толщина символов изменяется во время горизонтального масштабирования.
.pre-scrollable Добавляет горизонтальное скроллирование для объектов тега <pre> в зависимости от разрешения экрана.

При том что в Bootstrap предусмотрена адаптивность текста и к тому же перечисленные классы добавляют некоторые возможности подгонки текста под размеры дисплеев, это все равно не обеспечивает адаптивного шрифта.

Решение найдено!

Для выхода из сложившейся ситуации в css3 было найдено решение в виде таких размерностей, как vw, vh, vmin и vmax. С их помощью шрифт изменяется вместе с масштабированием экрана. При чем по разным координатным осям.

Размерность Описание
vw Изменения происходят на 1% в зависимости от ширины окна просмотра.
vh Размер шрифта меняется на 1% в зависимости от высоты веб-страницы.
vmin Изменение шрифта происходит по двум осям, однако в этом случае текст увеличивается до определенного момента, а уменьшается неограниченно.
vmax Аналогично предыдущему, однако увеличивается неограниченно, а уменьшается до определенного момента.

Для сравнения рассмотрите пример и проанализируйте соотношение размеров предложений и окна.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Пример для сравнения</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
 
<div class="container">
  <h1 style="font-size: 4vmin">Первый заголовок</h1>
<h1 style="font-size: 4vmax"> Второй заголовок </h1>
<h1 style="font-size: 4vw"> Третий заголовок </h1>
<h1 style="font-size: 4vh"> Четвертый заголовок </h1>
</div>
 
</body>
</html>

Теперь и вы владеете базовыми навыками подгонки текста под размеры дисплея. Если кто-то из вас желает расширить свои знания, то подписывайтесь на обновления моего блога. Буду очень благодарен, если вы поделитесь ссылкой и со своими знакомыми. До новых встреч!

Пока-пока!

С уважением, Роман Чуешов

Прочитано: 1974 раз
Этот блог уже читают
читай и ты!
Оставить коментарий
:p :-p 8) 8-) :lol: =( :( :-( :8 ;) ;-) :(( :o: