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

Прежде, чем начать что-то делать, надо разобраться с принятыми единицами измерения.CSS поддерживает множество единиц измерения, но здесь будут описаны только самые часто-применяемые.

px - пиксели

Самая основная единица измерения, которая встречается практически везде - это пиксели. Пиксель - это точка минимального размера на вашем экране. Весь экран состоит из таких точек. Вообще, если мы говорим о CSS, то пиксели здесь не всегда будут равны тем самым точкам на экране. К примеру, если у вас Retina Display, то, скорее всего, за один CSS-пиксель у вас будет отвечать аж квадрат из 4-х соседних пикселей. Эта технология служит для сглаживания изображений. Итак, пиксели. Если вам в конкретной задаче нужна постоянная, практически ни от чего не зависящая единица измерения, смело используйте её.

Пример - нужно установить размер контейнера для сайта. С очень высокой вероятностью, вы должны использовать пиксели.

% - проценты

Проценты используются там, где нам нужно задать величину относительно другого значения. Как правило, относительно родителя.

К примеру, у родительского блока есть четыре равных, дочерних. Ширина родительского блока зависит от размера экрана пользователя и нам точно не известна,а дочерние блоки должны быть расположены рядом друг с другом. Используем ширину 25% у блоков и мы решим эту задачу.

em и rem - значение относительно шрифта.

em - это относительная единица длины, равная размеру текущего шрифта. То есть, если мы верстаем кнопку, кегль шрифта которой равен 10px,мы можем установить padding: 1.5em, что будет означать, что пока размер шрифта этой кнопки равен 10px, то padding будет равен 15px (1.5*10px). Если где-то ниже будет вторая такая кнопка с модификатором (дополнительный класс, который, например, переопределяет размер шрифта на 20px), то padding, равный 1.5em преобразуется браузером в 30px (1.5*20px).

rem делает всё то же самое, но берёт размер шрифта, установленного в html. То есть, если мы хотим точно управлять размером шрифта, лучше установить этот код:

html {
  font-size: 18px;
}

Так, мы сможем установить размер шрифта в rem во всём документе, а когда нам понадобится его уменьшить (например, для мобильных устройств с маленькими экранами),мы просто изменим это значение прям в html и весь сайт адаптируется под новый экран.

vw, vh, vmin и vmax - значение относительно размера экрана

Тут всё просто. Каким бы ни был экран пользователя вашего сайта, 1vw всегда будет равен 1% от ширины его экрана, а 1vh будет равен 1% от высоты его экрана.

vmin - это наименьшее значение среди vw и vh. Если экран пользователя расположен горизонтально (экран ноутбука, например), то vmin = vh.Если это экран телефона, например, расположенный вертикально, то vmin = vw

vmax - точно так же, но наоборот. Это наибольшее среди значений vw и vh.

fr - (fragment) - "единица гибкости"

fr используется в гридах . Об этой единице измерения очень хорошо описано в этой статье: Что такое единица гибкости fr в CSS, доступным и простым языком . Если коротко, то fr позволяет разделять пространство на части.

К примеру, элементы грида нужно разделить так, чтобы все они были равны. Для этого нужно задать для них ширину равную, например, 1fr.Тогда все элементы будут равны между собой.

А что если у нас есть два блока в грид-контейнере, ширина которых должна относиться друг к другу как 1 к 3? Получается, всего частей у нас 4 (1+3),тогда ширина первого будет 25%, а второго 75%. И зачем же нам fr? Мы можем задать ширину первого 1fr, а второго 3fr и получить такой же результат. Но почему бы просто ни использовать проценты? А что если мы точно знаем, что первый блок должен быть 50px в ширину, а второй и третий - делить между собой оставшееся пространство так, чтобы второму досталось 25%, а третьему 75%? Если задать "50px 25% 75%", ничего не получится, потому что общая сумма будет равна 25% ширины контейнера + 75% ширины контейнера + 50px, что уже точно больше, чем 100% и блок выйдет за границу контейнера. Как раз здесь нам и нужно использовать fr. Мы можем задать "50px 1fr 3fr" - и вуаля! Ведь fr разделит именно свободное пространство.

Таким образом, fr позволяет нам делить имеющееся пространство на доли, отношение которых и задаётся этой единицей измерения.

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

Также CSS поддерживает и другие единицы измерения:

  • mm (миллиметры),
  • cm (сантиметры)
  • ex (относительно высоты строчной буквы)
  • ch (относительно ширины строчной буквы)
  • in (дюймы)
  • pt (типографские пункты = 1/72in = 0.3528mm)
  • pc (пики. одна пика эквивалентна 12pt)

и другие. Они значительно реже применяются на практике, но для общего развития стоит изучить и их.