Единицы измерения CSS (px, %, em, vw, vh, vmin, vmax)

AdmiraДизайнLeave a Comment

Единицы измерения CSS (px, %, em, vw, vh, vmin, vmax)

Ситуация: вот только что на странице было все красиво… и вдруг расползлось. Зловредный лось. А все дело оказалось в единицах измерения CSS.

Многие свойства CSS имеют свои единицы измерения, рассматривать все полностью нет необходимости. Но некоторые уточнения необходимы. Особенно есть смысл обращать внимание на единицы измерения при импорте шаблонов.

1px (пиксель) = 1/96 дюйма, но не в CSS. 1 px в CSS — это точка на экране пользователя, физическая величина которой зависит от разрешения устройства и от того, с какого расстояния человек смотрит на его поверхность (мобильный телефон или телевизор). В каких бы единицах измерения мы бы не писали код, он приводится именно к px.

1 em = значению font-size родителя. По сути, относительная величина, поэтому font-size разных блоков может быть разный, а размер шрифта одинаковый.

1 rem = значению font-size <html> (корневого элемента документа).

1 процент (1%) — значение высчитывается относительно значения свойства родительского тега.

При уменьшении ширины родителя, уменьшается и ширина элемента, но не его шрифт.

1vw = 1% от ширины окна. При уменьшении ширины окна, уменьшается ширина, высота, шрифт элемента. Шрифт не будет масштабирован при нажатии Ctrl+ или Ctrl-.

1vh = 1% от высоты окна. При уменьшении высоты окна, уменьшается ширина, высота, шрифт элемента. Шрифт не будет масштабирован при нажатии Ctrl+ или Ctrl-.

1vmin = 1vw или 1vh. Выбирается то, которое меньше.

1vmax = 1vw или 1vh. Выбирается то, которое больше.

Функция calc()

Никогда не хотелось от процентов вычесть пиксели или емы?
Теперь это возможно. Функция calc() позволяет реализовать математические выражения

+ добавление (символ отделяется пробелами с двух сторон)
- вычитание (символ отделяется пробелами с двух сторон)
* умножение
/ деление

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *