Единица измерения - %
Проценты(%) - это относительная единица, она рассчитывается исходя из свойств родительского элемента. То есть 20% у одного элемента может отличаться от 20% у другого элемента, в зависимости от того, какие свойства у их родителей.
Если у нас будет блок с шириной 200px, а его дочерним(вложенным) элементам будет задана ширина в 50%, то значит ширина в пикселях у них будет равна - 100px. То есть 50% от 200px. Если у родителя 500px, значит 50% - это 250px.
Единица измерения - vh
vh(view height) - относительная единица измерения, которая берет свои значения из высоты окна браузера. То есть если высота экрана равна 780px, то 100vh = 780px. Если высота экрана 480px, то 100vh = 480px. 50 vh = 240px.
Она очень удобна, например когда нам нужно поставить что-нибудь на всю высоту, мы просто будем прописывать значение 100vh, и тогда не будет разницы, какой высоты перед нами экран, все равно элемент будет занимать весь экран. Отличие от процентов в том, что проценты зависят от родителей, а vh - от высоты окна браузера. При изменении высоты окна браузера vh подстраивается под эти изменения.
Единица измерения - vw(view width)
Эта единица полностью такая же, как и vh, только зависит от ширины окна браузера. То же относительная величина. 33.3vw = одна треть от ширины экрана. При изменении ширины окна браузера vw подстраивается под эти изменения.
Единица измерения - rem
rem - относительная единица измерения. Она рассчитывается из свойства font-size, заданному HTML. Если у html свойство font-size равно 15px, то один rem по всему документу равен 15px, 10rem = 150px, 30rem = 450px.
Эта единица удобна тем, что при адаптивности нам не нужно будет всем элементам на странице изменять стили(padding, margin, width, font-size и т.д.), придется всего лишь изменить один раз свойство font-size у html и все свойства сразу же изменят свои значения относительно новой заданной величины. Конечно только те элементы и свойства, для которых в качестве значений была присвоена единица rem.
Единица измерения - em
Такая же величина, как и rem, только с одним отличием - она рассчитывается исходя из свойства font-size, заданному родительскому элементу, а не html.
Подписывайтесь на канал, чтобы не пропустить следующие статьи, а также предлагайте свои темы на выбор в группе ВКонтакте в описании канала.