Единицы измерения в CSS

  • Абсолютные единицы измерения - не зависят от значения других свойств и представляют собой собой физические размеры — пиксели, дюймы, сантиметры, пункты и тд.
  • Относительные единицы измерения - зависят от того или иного значения других свойств, но практичнее в том плане, что позволяют устанавливать соотношения между различными размерами

Пиксели (px)

Пиксель - абсолютная единица измерения (фиксированная), имеющая четкое значение и являющаяся по сути базовой единицей в CSS. Остальные единицы измерения в том или ином виде переводятся браузером в итоге в пиксели. Размеры всех элементов и шрифтов в макетах всегда заданы в пикселях, благодаря чему возможна верстка в "perfect pixel", однако задавая размеры в пикселях в строгих значениях макета, мы делаем верстку неотзывчивой, а при её адаптиве возникает большой объем работы для изменения всех размеров элементов.

  • Пиксели можно задавать в дробных значениях - font-size: 14.5px;
  • Само свойство font-size наследуется потомками (с оговорками для элементов форм)
  • Размер шрифта в браузере по умолчнию 16 px
  • Задавая размеры в пикселях, мы лишаем возможности пользователя изменять размер шрифта в самом браузере

Относительные единицы

Em (ephemeral unit) - размер берется от текущего или унаследованного размера шрифта (font-size), процентная запись em имеет смысл 1em = 100%. Так как размеры шрифта наследуются, то нужно учитывать это поведение при многоступенчатой вложенности блоков (можно запутаться при сложной структуре)! em удобно использовать при определии отсупов заголовков, паддингов внутри блока, т.к. зависимость идет относително шрифта => меняем шрифт, и пропорционально ему меняются все эти данные (удобно при адаптиве).

Rem (root ephemeral unit) - это корневой em (root em), размер берется от значения font-size в теге либо размера в браузере по умолчанию. Поэтому при использовании размеров в rem`ах совсем неважно какие размеры у родительских элементов. Для указания размера шрифта идеально подходит, позволяет уменьшить объем работы при адаптиве, но также как и em требует вычислений.

Проценты % - самая сложная из относительных единиц измерения, так как разные свойства вычисляют значения в процентах относительно разных величин:

  • Ширина width - относительно ширины родителя
  • Высота height - относительно высоты родителя, но только если у родителя явно задана высота, либо это флекс или грид элемент
  • При абсолютном позиционировании top,left,right,bottom - относительно размеров родителя, которому присвоено значени position: relative (при этом задавать высоту явно родителю не требуется)
  • Margin/padding - относительно ШИРИНЫ родительского элемента (даже если вертикальные св-ва)
  • font-size и line-height - относительно унаследованного свойства font-size
  • transform: tranlate(x,y) - относительно размеров объекта, который трансформируем!

Единицы измерения относительно окна браузера (viewport)

Viewport - это видимая пользователю область, которую видит пользователь на экране, когда заходит на страницу сайта с любого устройства, не прибегая к прокрутке. В настоящее время пользователи заходят на страницы с разных устройств, разрешение экрана сильно различается. Однако при помощи следующих единиц измерения можно умело пользоваться размерами viewport`a:

  • vw - относительно ширины вьюпорта
  • vh - относительно высоты вьюпорта
  • vmin - относительно меньшего значения из VW, VH
  • vmax - относительно большего значения из VW, VH

Прочиие единицы измерения (FR, EX, CH, MM, CM)

  • FR - единица, используемая в гридах, при помощи нее используем свободное пространство
  • EX - единица, относительно размера символа "х"
  • CH - единица, относительно размера нуля "0"
  • ММ, CM, PT - производные от пикселя, почти не используют

Размер шрифта – это некоторая «условная единица», которая встроена в шрифт. Это вовсе не «размер самой большой буквы в нём». Размер шрифта обычно чуть больше, чем расстояние от верха самой большой буквы до низа самой маленькой, т.е., предполагается, что в эту высоту помещается любая буква или их сочетание. Но при этом «хвосты» букв, таких как р, g могут заходить за это значение, то есть вылезать снизу. Поэтому обычно высоту строки делают чуть больше, чем размер шрифта.

Фрилансер по жизни -> www.youtube.com

#css
openImgPic