bga68comp | HTML. Единицы измерения CSS

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

Многие свойства CSS имеют свои единицы измерения, рассматривать все в одной статье нет необходимости.

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

1 em = значению font-size родителя. Обратите внимание, что в полигоне ниже font-size жёлтого и коричневого блоков разный, а размер шрифта одинаковый.

16px * 1 = 16px // жёлтый
16px * 0,5 = 8px // зелёный
8px * 2 = 16px // коричневый

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

16px * 1 = 16px // жёлтый
16px * 0,5 = 8px // зелёный
16px * 2 = 32px // коричневый

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

16px * 100% = 16px // жёлтый
16px * 50% = 8px // зелёный
8px * 200% = 16px // коричневый

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

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

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

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

px
em rem
% vw vh vmin vmax

font-size: 16px;

font-size: 8px;

font-size: 32px;

<style>
##raz { font-size: 16px; width: 150px; height: 150px; }
##raz > div { font-size: 8px; width: 100px; height: 100px; }
##raz > div > div { font-size: 32px; width: 250px; height: 250px; }
</style>

<div id="raz">font-size: 16px;
<div>font-size: 8px;
<div>font-size: 32px;</div>
</div>
</div>