Введение в единицы измерения CSS - vh, vw, em, rem,%, px и другие!

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

1. Процент -%

Когда вы определяете значение элемента CSS в процентах, он изменяет его размер до процента, определенного относительно его родительского элемента. Итак, если я определю поле как 50%

Теперь, если я увеличу размер представления, внешние 50% увеличатся, поскольку его родительский элемент является всем представлением, а внутренний - нет, поскольку он привязан к родительскому контейнеру.

2. Пиксель - пикс.

Использование px даст вам точный пиксельный контроль над размером.
В приведенном выше примере мы используем 50 пикселей, и оно не привязано к какому-либо родительскому элементу в качестве его точного значения.

3. Высота области просмотра (vh) и ширина области просмотра (vw)

Они также похожи на%, поскольку они относятся ко всему экрану, поэтому 1vw = 1% от ширины экрана.

Но в отличие от процентов, они не связаны родительским представлением и всегда связаны со всем представлением.

Как вы можете видеть выше для двух размеров экрана, vw не привязан к родительскому представлению, а вместо этого привязан ко всему представлению.

То же самое и с vh.

4. rem и em

rem и em работают с размером шрифта. поэтому 1 rem имеет тот же размер, что и размер корневого шрифта, и аналогично 2 rem вдвое больше размера корневого шрифта.

тогда как em относится к размеру родительского шрифта и будет увеличиваться и уменьшаться в зависимости от размера корневого шрифта.

<html>
 <head>
  <style type="text/css">
   .each-value {
    margin: 10px;
   }
   .box {
    border-width: 3px;
    border-color: black;
    border-style: solid;
    font-size: 40px;
   }
   .one-em {
    font-size: 1em;
   }
   .one-rem {
    font-size: 1rem;
   }
   .two-em {
    font-size: 2em;
   }
   .two-rem {
    font-size: 2rem;
   }
  </style>
 </head>
 <body class = "container">
  <div class= "each-value one-em" >1 em</div>
  <div class= "each-value one-rem" >1 rem</div>
  <div class= "each-value two-em">2 em</div>
  <div class= "each-value two-rem">2 rem</div>
  <div class= "box">
   <div class= "each-value one-em" >1 em</div>
   <div class= "each-value one-rem" >1 rem</div>
   <div class= "each-value two-em">2 em</div>
   <div class= "each-value two-rem">2 rem</div>
  </div>
 </body>
</html>

В приведенном выше случае размер шрифта для внешнего вида равен системному размеру шрифта, поэтому он одинаков для em и rem.

Но внутри поля я определил размер шрифта как 40 пикселей, поэтому em основывает свой размер на 40 пикселей, в то время как rem по-прежнему полагается на размер корневого шрифта.

Итак, в этом сценарии вы можете видеть, что использование em может быть не лучшей идеей при масштабировании шрифтов, но вместо этого лучшим выбором будет rem.

Однако, если вы определяли размер чего-то, что должно было увеличиваться по мере увеличения шрифта, например, значка перед текстом, то использование em будет лучшим вариантом, поскольку размер значка и текста всегда будет выровнен, поскольку мы использовали em вместо этого. rem, как показано ниже.

Надеюсь, это поможет вам решить, какой размер использовать и в каком сценарии.

Не забудьте подписаться на публикацию The Lean Programmer Publication, чтобы увидеть больше таких статей, и подпишитесь на нашу новостную рассылку tinyletter.com/TheLeanProgrammer