07
Июл
2019

Единицы измерения CSS для font-size: px, %, em, rem, vw, vh, vmin, vmax

Всем привет! Меня зовут Анна Блок, и сегодня мы поговорим про единицы измерения в CSS. Наверняка, многие из вас знают о таких единицах измерения, как px и %. Однако, по мимо всего прочего, мы разберем, как работают rem, em, vh, vw, vmax и vmin.

Cтатья получится большой, поэтому разобьем её на две части. Здесь мы поговорим о том, как эти единицы измерения влияют на размер шрифта, т.е на font-size. Во второй части затронем тему, насколько удобно использовать такие единицы измерения для того что бы управлять свойствами padding, margin, height, width и border-radius.

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

Pixels

Давайте начнем с самого распространенного — px (c англ. pixels). Пиксель — это базовая, абсолютная и окончательная единица измерения. Пиксель в CSS — это то, что вы видите на экране. Именно он задает значение разрешению монитора. Все значения браузер при веб-разработке пересчитывает в пиксели.

Итак, давайте разберем разметку, которая у нас есть в интерактивной форме. Например, в первом блоке, есть класс box-px за счет которого мы и будем стилизовать текст, который находится внутри.

<div class="box box-px">
   <h2>Pixels</h2>
   <p class="text-1">font-size:16px</p>
   <p class="text-2">font-size:8px</p>
   <p class="text-3">font-size:32px</p>
</div>

Обратите внимание, основные классы дублируются. На всю основную стилизацию влияет класс, который стоит после box. Например, если просмотреть код CSS, то можно увидеть стилизацию .box-px .text-1.

.box-px .text-1 {
   font-size:16px;
}

В примере мы видим значение font-size:16px, то есть то, что написано в классе text-n, то и дублируется в CSS. Это сделано для наглядности. Вы должны понимать, что большинство браузеров по умолчанию имеют значение font-size: 16px. Если убрать свойство .box-px .text-1, то визуально ничего не изменится. При этом если мы вернем свойство назад, то тоже ничего не изменится, потому что это значение заложено по умолчанию в браузере. Однако, все что мы стилизуем далее — видоизменяется:

.box-px .text-2 {
   font-size:8px;
}
.box-px .text-3 {
   font-size:32px;
}

Если мы используем значение меньше 16px, то наш текст уменьшается. И наоборот: если мы будем использовать значение больше, то текст увеличится. Звучит логично, не так ли? Но как работают другие единицы изменения? Давайте разбираться дальше.

Percent

Следующее значение, которое мы рассмотрим это проценты (%). Вы же помните, что браузер по умолчанию использует значение 16px? Это значит, что все относительные единицы, которые мы будем использовать в дальнейшем тоже будут преобразовываться в проценты. Но мы этого с вами не увидим, т.к. эти процессы будут проходить внутри браузера.

Значение процентов высчитывается относительно значения свойства родительского тега. Это значит, что если текст будет вложенным, то его значение будет меняться в зависимости от того тега, в который он вложен. Давайте рассмотрим это наглядно. Напишем, тег p, внутри которого будет находиться тег span,и внутри которого разместим еще один span

<p>Lorem <span>Lorem<span>Lorem</span></span></p>

Для тега p добавим следующее:

p {
   font-size: 100%;
}

Если бы мы были браузерами, то высчитали значение font-size: 16px. Далее переходим к span. Стилизуем его:

p>span {
   font-size: 50%;
}

Мы увидим, что вложенный span и тот span, который находится внутри него, стали равнозначны значению 8px. Как мы это посчитали? Итак, font-size: 100% = 16px и если мы берем половину, то есть 50%, то половина этого значения и будет значение 8px.
Теперь давайте стилизуем еще большую вложенность:

p>span>span {
   font-size: 400%;
}

Если бы мы указали здесь значение 200%, вышло бы, что мы взяли 2 раза по 8px, складываем 8px + 8px = 16px. Если мы укажем здесь 400%, то здесь у нас станет значение в два раза больше, то есть 16px * 2 = 32px.

Ознакомиться подробнее с HTML и CSS можно тут:

Em

Давайте снова вернемся к нашему первому шаблону и поговорим про такую единицу измерения, как em. Давайте выясним, как будут себя вести данное значение, если мы вместо пикселей будем указывать относительную единицу em. Для этого создадим пример, у нас будет некий box внутри которого будет содержаться два текста один просто в div-е, другой во вложенном div-е с классом post.

<div class="box">
   Lorem Ipsum
   <div class="post">Lorem Ipsum</div>
</div>

Итак, как я уже сказала, по умолчанию в body у нас содержится font-size: 16px, далее стилизуем post

body {
   font-size: 16px;
}
.post {
   font-size: 1.2em;
}

Что бы понять какое значение содержится в post, вы можете взять в руки калькулятор, либо если вы используете систему macOS, то нажимаете на Command + пробел, и у вас всплывает окно, в котором вы можете делать вычисления. Итак, нам необходимо умножить 16 на 1.2 и у нас получается 19.2, это значит, что браузер выводит текст post, как 19.2px. Такую относительную единицу измерения удобнее использовать, если вам нужно изменить значение в body, например, поставить значение 30px. И тогда у вас значение в post будет вычисляться автоматически, то есть умножаться на 1.2. При этом если бы вы работали с пикселями и написали бы в post 30px, а в body в дальнейшем написали бы 50px, то ничего бы у вас не изменилось в значении post и соответственно вам бы пришлось вводить все это вручную.

Ознакомиться подробнее с HTML и CSS можно тут:

Теперь давайте снова вернемся к первому примеру. И мне бы хотелось добавить, что вы можете проверять, какие единицы измерения работаю в связке с body. Например, если написать в первом примере

body {
   font-size: 30px;
}

то мы сразу увидим, какие значения изменяться. Например, пиксели не изменились совершенно, но при этом у нас поменялись проценты и em.
Далее идет единицы измерения rem, которую мы с вами рассмотри. И здесь, как вы видите, она не зависит от body, это первое ее отличие от em.

Вложенность
Пока мы полностью не перешли к теме rem, давайте рассмотрим еще один пример связанный со вложенностями. Самый удобный пример, связанный с вложенностями это списки, поэтому давайте будем работать с ними.

<ul>
   <li> Первый уровень
      <ul>
         <li> Второй уровень
            <ul>
               <li> Третий уровень
                  <ul>
                     <li>Четвертый уровень</li>
                  </ul>
               </li>
            </ul>
         </li>
      </ul>
   </li>
</ul>

Как я уже сказала body это 16px, поэтому сейчас здесь в CSS я этого записывать не буду, давайте сразу перейдем к стилям для тега ul, задав ему размер 0.8em

ul {
   font-size: 0.8em; 
}

И здесь мы видим первую проблему — каждая последующая вложенность становится меньше и кратна значению родителя. При этом, если мы используем значение больше единицы, например 1.8em, то каждая последующая вложенность увеличивается относительно предыдущего уровня. Эту проблему на самом деле можно решить, но этот метод не является совершенным. И решается она следующим образом

ul {
   font-size: 0.8em; 
}

ul ul {
   font-size: 1em; 
}

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

Rem

Итак, как вы уже поняли, это значение не взаимодействует с body, оно взаимодействует с основным корневым тегом html, с которого начинается весь документ html. Если мы говорим сейчас о корневом узле, то у него есть особый селектор псевдокласса и записывается он как :root. В данном случае rem это и есть сокращение от слов «root em», то есть «корневой em». Если вы работаете с rem, то вы должны помнить, что его значения относительны не к текущему элементу, а к корневому. То есть в данном случае совершенно не важно, где вы используете значение rem, оно никак не будет влиять на все остальные значения. То есть если мы вернемся к предыдущему примеру и когда мы начали говорить о его проблемах с использованием em, то в данном случае если мы напишем rem, эта проблема отпадает. Вы так же можете использовать значения больше единицы, и при этом остальные уровни никак не видоизменяются. Они используют те же значения, что и первый элемент.

Ознакомиться подробнее с HTML и CSS можно тут:

Если вернуться к примеру где мы рассматривали em, то здесь мы можем скопировать box и написать box-rem, что бы его как-то отличать друг от друга

<div class="box-rem">
   Lorem Ipsum
   <p class="post">Lorem Ipsum</p>
</div>

Если в стилях мы запишем

.box-rem .post {
   font-size: 1.2rem;
}

то увидим, что это значение никак не видоизменяется. Так как первый «Lorem ipsum» у нас записан вне тегов, то естественно он меняется по отношению к body, но при этом если мы запишем селектор :root

:root {
   font-size: 50px;
}

То мы увидим, что значение post меняется относительно этого сектора.

Ознакомиться подробнее с HTML и CSS можно тут:

Давайте создадим еще один пример и поговорим о некоторых тонкостях с использованием rem. Давайте снова создадим box, внутри будет тег h2 и p

<div class="box">
   <h2>Home</h2>
   <p>Does your lorem ipsum text long for something a little fishier? Give our generator a try… it’s fishy!</p>
</div>

То, что я сейчас покажу оно будет являться антипримером и я не советую использовать это и, конечно же, в конце я объясню почему именно не следует использовать тот пример, который я сейчас вам покажу. Итак запишем селектор :root. Теперь давайте поговорим о том, как вычислить 10px с точки зрения em. Для этого мы снова открываем калькулятор. Что бы вычислить, сколько будет 10px, мы делим 10 на тот размер который у нас установлен по умолчанию, то есть на 16px итого у нас получается значение 0.625. Давайте запишем

:root {
   font-size: 0.625em;  /*=10px */
}

Далее давайте будем стилизовать h2. Начнем вычислять font-size с точки зрения rem для этого нам необходимо 14 разделить на 10 и выходит 1.4rem

h2 {
   font-size: 1.4rem; /* =14px */
}

Этот метод удобен тем, что нам, по сути, не нужно прибегать к вычислениям, все это возможно вычислить в уме. Но я предлагаю сделать заголовок сделать все-таки чуть больше, например, 24px, в rem значении это будет 2.4rem.

h2 {
   font-size: 2.4rem; /* =24px */
}

Как вы видите по умолчанию, если я не буду стилизовать p, либо какие-то другие элементы, которые будут появляться на странице, например

<ul><li>Lorem</li><li>Lorem</li><li>Lorem</li></ul>

то все они автоматом будут иметь размер шрифта 10px. Это будет слишком маленький размер шрифта и на экранах он будет нечитабельным, а это значит, что вам придется для каждого элемента добавлять размер шрифта, что соответственно увеличит ваш код. То есть здесь в данном случае приходиться чем-то жертвовать и как мне кажется, все-таки нецелесообразно использовать такой метод. Если, например, вы не хотите использовать размер шрифта 10px по умолчанию, то вы можете использовать другое значение — 14px. Давайте, опять же вычислим, сколько это будет, для этого делим 14px на 16, выходит 0.875rem

:root {
   font-size: 0.875em; /*=14px */
}

Теперь мы видим, что текст по умолчанию стал более читабельным и заголовок у нас тоже соответственно увеличился. Теперь вы должны понимать, что 2.4rem это не 24px. Давайте вычислим, сколько это будет. В данном случае, если нам надо 24px нам необходимо 24 поделить на 14 и у нас получается значение 1.71, цифры дальше вы можете не записывать. Давайте запишем

h2 {
   font-size: 1.71rem; /* =24px */
}

В таком случае размер заголовка у нас стал таким же, как тогда когда у нас font-size составлял 10px. Конечно же, такое значение вычислять уже придется с калькулятором, однако как вы видите, работа с кодом будет значительно меньше.
Давайте предположим, что мы работаем с media запросами, например, это у нас разрешение под мобильники и далее нам необходимо сделать размер шрифта чуть больше, но уже для планшетов и desctop-ых устройств. То есть если мы будем использовать media запросы то внутри мы можем записать min-with: 768px и внутри media мы запишем селектор :root с font-size: 1em, то есть 16px

@media (min-width:768px) {
   :root {
      font-size: 1em;
   }
}

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

Ознакомиться подробнее с HTML и CSS можно тут:

VW/VH

Теперь давайте перейдем к следующим значениям, это единицы измерения которые относятся к размеру экрана устройства. То есть все те значения, которые начинаются с буквы V, с английского это «viewport», в переводе на русский язык «область просмотра». Итак:

  • vh = 1/100 высоты области просмотра
  • vw = 1/100 ширины области просмотра
  • vmin = 1/100 наименьших высоты или ширины области просмотра
  • vmax = 1/100 наибольших высоты или ширины области просмотра

Но при этом вы должны помнить, что последние два значения, еще не так хорошо поддерживаются браузерами, поэтому будьте осторожны.
Итак, если рассмотреть пример, который мы видим здесь, если начать уменьшать экран, то можно увидеть, как vw уменьшается по ширине, при этом vh зависит от высоты, поэтому его значения никак не меняются. При этом если менять высоту экрана, то можно увидеть, что значения в блоке vh меняются в зависимости от высоты, а vw совершенно никак не реагирует. Запись

.box-vw .text-1 {
   font-size: 2vw;
}

значит, что на экране монитора, у которого будет значение 1200px, элемент будет равен 24px. Откуда это берется?! Это значение 2% от 1200px, то есть 1200 * 0.02 выходит 24px. При этом если взять, например, планшет, который в среднем составляет 768px, то размер шрифта составит примерно 15px, то есть это 2% от 768px.
Значения vmin и vmax не применимы к font-size поэтому их уже рассмотрим в следующей части, но знайте, что эти значения есть и они работают в связке с vw и vh, однако их можно использовать не всегда, а только в том случае если они необходимы. И не забывайте про поддержку этих значений.

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

Смотреть видео:

 

Share

Тебе может это понравится...


Warning: count(): Parameter must be an array or an object that implements Countable in /var/www/u0546839/data/www/prog-help.ru/wp-content/plugins/feedwordpress/syndicatedpost.class.php on line 1330

Warning: count(): Parameter must be an array or an object that implements Countable in /var/www/u0546839/data/www/prog-help.ru/wp-content/plugins/feedwordpress/syndicatedpost.class.php on line 1330

Warning: count(): Parameter must be an array or an object that implements Countable in /var/www/u0546839/data/www/prog-help.ru/wp-content/plugins/feedwordpress/syndicatedpost.class.php on line 1330

Warning: count(): Parameter must be an array or an object that implements Countable in /var/www/u0546839/data/www/prog-help.ru/wp-content/plugins/feedwordpress/syndicatedpost.class.php on line 1330

Warning: count(): Parameter must be an array or an object that implements Countable in /var/www/u0546839/data/www/prog-help.ru/wp-content/plugins/feedwordpress/syndicatedpost.class.php on line 1330