/ Сайтостроение / Адаптивность / Относительные единицы измерения текста

Относительные единицы измерения текста

Изначально при разработке шаблонов сайтов пользуюсь единицей измерения px. Но данный подход не является идеальным, т.к. имеет ряд недостатков. Рассмотрим альтернативные варианты задания размера текста.

Единицы измерения — px

px является наиболее простой и понятной единицей. Является абсолютной единицей, не с чем не связанной. Недостатком является то, что при смене шрифта приходится переопределять шрифт во всех стилях в ручную.

Единицы измерения — em

em — относительная единица. Относительна она по отношению к родительскому блоку, в котором задан размер шрифта. Одновременно и преимуществом и недостатком является зависимость от уровня вложенности.

Единицы измерения — rem

Основной размер шрифта сайта задается в px в стиле тэга html. А при другие вариация прописывается относительные ему rem.

Rem — это корневой em (Root Em)


Сильной чертой данного метода является, то что при изменении базовой единицы мы получим корректировку всех стилей сайта. Дело в том что разные шрифты могут визуально отличатся размером, для этого можно делать корректировку всего лишь одного стиля html. Также для каких-либо задач по общему изменению шрифта на сайте с помощью jQuery нам достаточного воздействовать на одно свойство. И в целом система стилей основанная на единицах rem более гармонична, т.к. в своей структуре работает с вариациями одного базового числа (золотое сечение).

Не шрифтовые размеры

Единицы em и rem можно также применять и для задания величин любых других свойств. Но не всегда это оправдано. Например для создания border лучше использовать px, т.к. относительный border может по разному отображаться в разных браузерах. Идеально использовать em и rem для padding и margin, причем используя в каких-то случаях rem, а в других em.

Viewport percentage lengths

Свойство шрифта изменять размер относительно размера экрана

vw (% от ширины экрана)
vh (% от высоты экрана)
vi (1% от размера экрана в направлении встроенной оси корневого элемента)
vb (1% от размера экрана в направлении оси блока корневого элемента)
vmin (меньше VW или VH)
vmax (больше VW или VH)

Свойство font-size: 2vw; работает как надо. При сужении экрана уменьшается и шрифт.

По поводу изменения размера шрифта от размера экрана / контейнера есть еще решение на jQuery — FitText.js.

Принцип простой: после подключения самого скрипта, цепляем к какому-либо блоку функцию fitText:

jQuery("#responsive_headline").fitText();

jQuery("#responsive_headline").fitText(1.2); // Изменяет размеры более агрессивно
jQuery("#responsive_headline").fitText(0.8); // 
Изменяет размеры менее агрессивно

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

Тэги:

Поделится информацией с друзьями

  • Похожие записи
  • Комментарии
  • Вложения
Иконки для сайта FontAwesome

Иконки для сайта FontAwesome

FontAwesome — иконочный шрифт (более 600 иконок) который подойдет для большинства сайтов (для контактов, навигации, интернет-магазина и т.д.). Установка шрифта Скачиваем шрифт с сайта. Копируем в наш сайт папку fonts Читать далее »

Установка шрифтов

Установка шрифтов

Установка шрифтов — один из важнейших этапов разработки дизайна сайта. В данном процессе множество нюансов как в плане дизайна. так и чисто технических. Рассмотрим различные аспекты связанные с установкой шрифтов Читать далее »

Стили текста

Стили текста

Приводим различные варианты оформления текстовой информации. Список Список с маркерами-изображениями 39 номеров 3 конференц-зала Ресторан .punkt li { margin: 5px 0; padding-left: 20px; list-style-type: none; background: url(//undersun-hotels.ru/wp-content/themes/meisterwerk/images/doth.gif) no-repeat left 6px; Читать далее »

Добавить комментарий

Пока нет комментариев. Будь первым!

Относительные единицы измерения текста
Настраиваем панель редактирования таксономий
Рекомендации для васНастраиваем панель редактирования таксономийOpttour.ru
Спасибо! Наш менеджер свяжется с Вами в течении 5 минут.