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

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

Изначально при разработке шаблонов сайтов пользуюсь единицей измерения 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.

Тэги:

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

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

Стили текста

Приводим различные варианты оформления текстовой информации. Список Список с маркерами-изображениями 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; Читать далее »

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

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

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

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

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


Deprecated: Function create_function() is deprecated in /home/htvtwmhs/public_html/wp-content/plugins/wp-spamshield/wp-spamshield.php on line 2033

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

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

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

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