Единица измерения em: Единицы измерения CSS — PX, EM, REM, %, VW, VH, VMIN, VMAX, FR, EX, CH

Единицы измерения в CSS | Введение в веб-разработку. Курс

В CSS есть ряд свойств, предполагающих в качестве значений указание определенного размера. Например, свойства font-size, width, margin, padding. Значением для них являются числа, после которых обязательно указываются единицы измерения, которых в CSS большое количество.

Абсолютные единицы измерения (cm – сантиметр и другие) не рекомендуется использовать при верстке веб-документов. Их применяют для шаблонов страниц, которые выводятся на печать.

Для веб-страниц широко используют:

• px – пиксели,
• em – единица измерения, относительная к размеру шрифта родительского элемента,
• % – проценты относительно размера родительского элемента.

Проценты и em – это относительные единицы измерения. Это значит, что размер 1em или 1% зависит от элемента страницы, от которого он берется. Пиксели можно считать условно абсолютными. Они абсолютны для конкретного экрана, но их размер зависит от самого экрана.

Пиксели в CSS и пиксели (точки) устройства – это не одно и то же. Их размер совпадает только на экранах с низким разрешением. Большинство современных устройств таковыми не являются. Ваш смартфон может иметь разрешение по ширине экрана в 720 точек, но размещенное на веб-странице изображение в 500px уже выйдет за его пределы, потому что 1px проецируется на несколько физических точек экрана.

Чтобы понять, почему в программировании пошли по такому пути, надо учесть, что размер точки на каждом типе экрана свой. Два одинаковых по размеру монитора (например, 24 дюйма по диагонали) могут иметь разное разрешение (например, 1920×1080 и 2560×1440). Понятно, что на втором размер точки будет меньше (ведь точек больше, а диагональ монитора та же). Чтобы изображение в 500px на нем не выглядело заметно меньшим, чем на первом, надо в 1px объединять большее количество экранных точек.

Этот процесс скорее всего выполняется операционной системой и может корректироваться настройками.

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

Смартфон вы держите в руках близко к глазам, на монитор смотрите с большего расстояния. Если бы, скажем, картинка там и там была одного размера (воспринималась бы нами как-будто она 5×4 реальных сантиметра), то более детально ее рассмотреть можно было бы только на близком расстоянии, то есть со смартфона. К монитору пришлось бы приближаться.

Поэтому размер 1px также должен зависеть от назначения устройства. Он должен быть крупнее на больших и мельче на малых экранах. На фото ниже видно различие в размере шрифта в 18px на смартфоне и мониторе.

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

Теперь рассмотрим преимущества и недостатки em (не путайте с одноименным html-элементом). Исторически название данной единицы измерения идет из типографского дела и означает ширину, равную (equal) большой букве M. К реалиям CSS это уже не имеет отношения.

В CSS 1em равен размеру шрифта родительского элемента. Когда свойство наследуется вложенными элементами, в их css-правиле его не объявляют, если хотят оставить размер шрифта без изменения.

На скрине выше документ не содержит своей таблицы стилей. Представление страницы зависит от стилей браузера и его настроек. Примечание: в Google Chrome панель разработчика открывается нажатием

Ctrl + Shift + I, ими же закрывается.

По-умолчанию браузер (агент пользователя) для h2 устанавливает размер шрифта в 2em. Для остальных элементов в «таблице стилей агента пользователя» font-size не объявлен. Это значит, что значение свойства равно 1em.

А вот что из себя представляет 1em зависит в том числе от настроек браузера. Если там поменять размер шрифта со «Среднего» на «Крупный», размер букв станет больше.

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

Итак, если мы исходно используем на странице

em, размер ее элементов будет зависеть от агента пользователя. Так не будет, если задать размер шрифта в px.

body {
  font-size: 16px;
}

В этом случае элементы страницы станут независимы от того, что предпочел выбрать пользователь в настройках браузера. Если он захочет увеличить текст, то сможет это сделать только путем масштабирования страницы (Ctrl + колесо мыши, Ctrl + 0 – вернуться к исходному масштабу), что увеличит также те элементы, для которых этого не требуется (меню, картинки).

В этом смысле не задавать размеры в px в самых «предковых» элементах может быть предпочтительным (с другой стороны, пользователи редко меняют настройки по-умолчанию). Пиксели следует использовать там, где тонкая адаптация под разные устройства более значима, чем приспособление под настройки пользователя.

Часто в пикселях задают размеры полей и отступов. Ведь если разработчик не можете контролировать величину одного

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

Обратите внимание, если для body указать размер шрифта в пикселях, а правила для h2 не прописывать, то это не меняет 2em для заголовка от браузера. Элемент body является родительским для h2. Следовательно, второй наследует размер шрифта первого, а значение 2em увеличивает его в два раза. То есть, если для тела документа устанавливается размер шрифта в 16px, то по-умолчанию заголовок будет фактической величиной в 32px.

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

Решить проблему можно, например, задав правило для вложенных списков. Здесь указать 1em для шрифта.

p, ul {
  font-size: 1.15em;
}
ul ul {
  font-size: 1em;
}

Селектор потомка ul ul выбирает из документа неупорядоченные списки, которые вложены в другие неупорядоченные списки. Вложенный список наследует значение 1.15em от внешнего. При этом к нему самому свойство font-size: 1.15em не применяется, так как его перекрывает аналогичное из более специфичного правила, где 1em берется от значения родителя, то есть от 1.15em (1. 15 * 1 = 1.15).

Если на странице или сайте много подобных вложении, следует задуматься об использовании похожей на

em единице измерения – rem. Буква r обозначает корневой элемент (англ. root). Им является html. Все остальные значения rem вычисляются относительно его значения, а не ближайшего обрамляющего контейнера.

Значение в 1em в селекторе html можно не указывать, оно достается по-умолчанию. В таком случае все значения rem на странице будут вычисляться относительно 1em.

По отношению к размеру шрифта сходно с em действуют проценты. Они вычисляется от размера шрифта родительского элемента. Так значение 200% увеличит размер в 2 раза.

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

Для самого внешнего – это ширина окна.

Код примера:

<!DOCTYPE html>
<html lang="ru">
<head>
<meta name="viewport" 
content="width=device-width, 
initial-scale=1">
<style>
 
html {
  font-size: 1.3em;
}
p {padding: 5px 15px;}
 
header {
  height: 75px;
  background: Cornsilk;
}
 
nav {
  width: 20%;
  float: left;
  background: LightCyan;
  min-height: 90vh;
}
 
main {
  width: 80%;
  float: right;
  background: Aquamarine;
  min-height: 90vh;
}
 
article {
  width: 60%;
  float: left;
  background: LightGrey;
  min-height: 50vh;
}
 
aside {
  width: 40%;
  float: right;
  background: CornflowerBlue;
  min-height: 50vh;
}
 
</style>
</head>
<body>
 
<header><p>Название сайта</p></header>
 
<nav><p>Навигация</p></nav>
 
<main>
  <p>Основное содержимое</p>
 
  <article><p>Статья</p></article>
 
  <aside>
    <p>Дополнительная информация</p>
  </aside>
</main>
 
</body>
</html>

Здесь элемент header занимает всю ширину (100%), так как это блочный элемент, и мы не меняем его ширину.

Элементы nav и main также вложены в body. Но первый занимает 20% его ширины, второй – 80%.

Элементы article и aside находятся внутри main, относительно которого и вычисляется ширина каждого.

Единицы измерения | Основы верстки контента

Зарегистрируйтесь для доступа к 15+ бесплатным курсам по программированию с тренажером

В прошлых уроках вы уже узнали о единицах измерения px. Можно заметить, что стоит указать где-то 20px и это значение будет зафиксировано. Неважно, что вокруг элемента с таким значением, какое разрешение экрана или какое устройство используется. 20 пикселей всегда будут 20 пикселями.

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

В противовес абсолютным единицам измерения существуют относительные единицы измерения. По их названию видно, что они зависят «от чего-то». А вот от чего они зависят, мы рассмотрим в конце урока.

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

Абсолютные единицы

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

Самой распространенной единицей является пиксель. С ней вы уже знакомы по другим урокам. Но что же такое пиксель? Если не вдаваться в электронику, то пиксель — это всего лишь минимальный элемент, из которого состоит изображение на экране. Значит, мы указываем, сколько таких элементов должно быть занято на экране устройства.

При этом стоит понимать, что 100 пикселей на одном экране могут быть не равны 100 пикселям на другом экране. Все зависит от размера пикселей в мониторе. А это, в свою очередь, зависит от характеристик экрана и его разрешения.

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

div {
  height: 100px;
  /*
    Блочный элемент занимает строго 100 пикселей.
    Реальный размер (в сантиметрах) может отличаться на разных устройствах
  */
}

Другие абсолютные единицы почти не используются в разработке для веб-устройств. Стоит их перечислить, но есть вероятность, что вы никогда не будете их использовать.

• cm — сантиметры
• mm — миллиметры
• Q — четверть миллиметра
• in — дюйм
• pc — пайка/пика. Термин из типографики
• pt — пункт

Заметьте, что среди этих единиц есть знакомые в реальной жизни. При верстке для печати это может быть полезно.

Относительные единицы

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

1. Относительные единицы, рассчитывающиеся от размера шрифта.
2. Относительные единицы, рассчитывающиеся от размера экрана. Это немного грубое сравнение — на самом деле расчет ведется от размера viewport. О том, что это такое, вы узнаете из курса по адаптивности.

Проценты

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

<html>
  <body>
    <!-- body — дочерний элемент html. html — родительский элемент для body -->
    <main>
      <!-- main — дочерний элемент body.  body — родительский элемент для main -->
      <section>
        <!-- section — дочерний элемент main. main — родительский элемент для section -->
        <p>
          <!-- p — дочерний элемент section. section — родительский элемент для p -->
        </p>
        <div>
          <!-- div — дочерний элемент section. section — родительский элемент для div -->
        </div>
      </section>
    </main>
  </body>
</html>

Рассмотрим на примере ширины и размера шрифта.

<section>
  <div>
    <p>Параграф текста</p>
  </div>
</section>

.w-400px {
  width: 400px;
}
.w-50p {
  width: 50%;
}
.size-50px {
  font-size: 50px;
}
.size-70p {
  font-size: 70%;
}

Что же здесь происходит? Разберемся по шагам:

• Для основного родительского <section> установлены размеры в абсолютных единицах измерения. Ширина 400 пикселей и размер шрифта 50 пикселей
• Вложенный <div> имеет ширину 50%. Этот размер относительный и высчитывается относительно ближайшего родителя, ширина которого 400 пикселей. Следовательно, ширина блока 400px / 2 = 200px
• Параграф текста имеет размер шрифта 70%. Ближайший родитель с установленным размером шрифта — <section>. Параграфу установится размер шрифта в 70% от 50 пикселей. То есть 35px

Интересным примером является установка процентов для тега или класса, который предполагает вложение друг в друга. Взгляните на следующий пример:

<ul>
  <li>
    Элемент 1
    <ul>
      <li>Элемент 1.1</li>
      <li>
        Элемент 1.2
        <ul>
          <li>Элемент 1.2.1</li>
          <li>Элемент 1.2.2</li>
        </ul>
      </li>
    </ul>
  </li>
  <li>Элемент 2</li>
  <li>Элемент 3</li>
  <li>Элемент 4</li>
</ul>

.size-30px {
  font-size: 30px;
}
li {
  font-size: 70%;
}

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

Поразмыслили? Молодцы! Теперь посмотрим, как это выглядит:

Проанализируем результат:

• Размер шрифта самого первого элемента <ul> — 30 пикселей.
• Все элементы <li> имеют размер шрифта 70%. Это значит, что чем глубже список, тем меньше размер шрифта:
  • Элементы 1, 2, 3, 4 будут иметь размер 21 пиксель.
  • Элементы 1.1 и 1.2 лежат внутри элемент 1. Размер шрифта этого элемента 21 пиксель. Это следует из прошлого пункта. Теперь размер шрифта считается именно от 21 пикселя.
  • Элементы 1.1 и 1.2 будут иметь размер 14.7 пикселя.
  • Элементы 1.2.1 и 1.2.2 лежат внутри элемент 1.2. Размер шрифта этого элемента 14.7 пикселей. Это следует из прошлого пункта.
  • Элементы 1.2.1 и 1.2.2 будут иметь размер шрифта 10.29 пикселя.

Относительные единицы, рассчитывающиеся от размера шрифта

Выдохните — самое сложное уже позади. Если вы внимательно изучили работу процентов, то другие относительные единицы не вызовут сложностей. Есть две основные относительные единицы измерения, которые зависят от размера шрифта: em и rem.

Значение em очень похоже на использование процентов. Оно показывает во сколько раз размер будет больше, чем у ближайшего вычисленного значения font-size. Если в прошлом примере со списками заменить 70% на 0.7em, то результат будет тот же самый.

Тогда в чем смысл em? Эту единицу измерения можно использовать не только для шрифта, но и для любых других свойств, которые принимают числовое значение. Например, в следующем коде размер нижнего внешнего отступа будет 60px:

section {
  font-size: 30px;
}
section p {
  margin-bottom: 2em;
}

Но если у параграфа выставить свое значение font-size, то единица em будет высчитываться именно от него. В этом и кроется смысл формулировки «чем у ближайшего вычисленного значения font-size».

Второй такой единицей является rem. Ее способ работы точно такой же, как у em. Но есть одно громадное отличие: rem отсчитывается от размера шрифта корневого элемента. Корневым элементом является <html>. Именно размер шрифта у этого элемента и учитывается при расчете единицы rem.

Вернемся к примеру со списком. Заменив em на rem получим совершенно другой результат. 0.7rem высчитываются из одного и того же места, без учета вложенности. Итого, каждый элемент будет иметь размер шрифта 11.2px. Это связано со стандартным значением размера шрифта в 16 пикселей у большинства браузеров.

Вы можете заметить, что размер шрифта в 30 пикселей у элемента <ul> не играет в данном случае никакой роли.

Относительные единицы, рассчитывающиеся от размера экрана

CSS позволяет задавать размеры относительно текущего размера viewport — размера окна браузера, доступного без прокрутки. Основными двумя единицами являются vw (viewport width) — ширина viewport и vh (viewport height) — высота viewport. Вы можете рассматривать это как процент от размера viewport.

Частый «кейс» с использованием таких единиц — создание секции на всю доступную область браузера.

<section></section>

body {
  margin: 0;
  padding: 0;
}
.one-screen-section {
  width: 100vw;
  height: 100vh;
  background: #80deea;
}

Понимание единиц em в CSS

Луи Лазарис / 14 марта 2012 г. /

Обновлено: 7 августа 2022 г.

Из-за того, что разработчики привыкли полагаться на значения пикселей, я думаю, что некоторые из нас могут не иметь полного представления о том, что такое единицы em в CSS и как они работают.

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

Ah-em — Определение, пожалуйста

Спецификация дает нам очень простое определение единицы em:

Равен вычисляемому значению свойства font-size элемента, для которого оно используется.

Другими словами, если у вас есть следующий CSS:

 .element {
  размер шрифта: 20px;
}
 

Тогда это означает, что 1em , определенный для этого элемента или любого из его дочерних элементов, будет равен 20px.

Итак, если вы сделали это:

 .element {
  размер шрифта: 20px;
  ширина: 4em;
  высота: 4см;
}
 

Тогда это означает, что ширина и высота элемента (определенные здесь как 4em x 4em ) будут вычисляться как 80px x 80px (20px * 4 = 80px).

Давайте подчеркнем это

Ключ к запоминанию этого основан на том, что такое фактическая единица «эм» и откуда она берется. Согласно статье Википедии об em:

em — это единица измерения в области типографики, равная указанному в настоящее время размеру пункта. Название em связано с M. Первоначально единица была получена из ширины заглавной буквы «M» в данном шрифте.

Далее в статье объясняется, что, хотя единица em изначально основывалась на ширине буквы «M», это уже не так, и теперь единица em обычно относится к размеру шрифта в пунктах.

При таком методе расчета в файле CSS нет строгого определения того, что такое «em»; все зависит от того, что еще происходит в вашей таблице стилей. Так что теоретически, если вы объявили целую кучу значений длины, используя em для различных элементов на своей странице, изменение одного размера шрифта может привести к сбою всего макета.

Что делать, если «размер шрифта» не используется?

В приведенном выше примере я явно определяю размер шрифта. Единица em впоследствии получается из этой «базовой» настройки. Но что, если для элемента не указан размер шрифта?

В этом случае, поскольку свойство font-size наследуется через дерево документа, значение единицы em будет получено из того, что фактически унаследовано. Если размер шрифта нигде в документе не указан, то значение одной единицы em будет равно 16px, что является значением по умолчанию (и я полагаю, что это работает одинаково во всех браузерах).

«rem» должен быть автоматическим для людей

Самое время рассказать о новом дополнении CSS3: единице измерения rem. Модуль rem (или модуль «root em») довольно хорошо поддерживается браузерами: IE9+, FF3.6+, Chrome, Safari 5+ и Opera 11.6+.

Из того, что я вижу, модуль rem довольно прост. Это позволяет вам основывать свои единицы em на «корневой» единице, определенной в элементе . Таким образом, вы можете сходить с ума от настроек размера шрифта во всех местах вашей таблицы стилей, и любые размеры, определенные с помощью ‘rem’, будут относиться к корневому элементу и не будут наследоваться от родителя, как в случае с ‘ em’ (который вы по-прежнему можете использовать, позволяя создавать различные контексты корневого модуля, сохраняя при этом возможность ссылаться на корневой модуль).

Как и в случае с em, если вы не определите значение font-size для элемента , тогда корневой единицей em будет значение по умолчанию 16px.

Carpe di-em

Уже надоели каламбуры? Ну, очень плохо. 🙂

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

Хотя можно сделать весь макет, используя только единицы em, я думаю, что для адаптивных макетов лучше всего использовать пиксели или проценты — и, как уже упоминалось, использовать em для типографики.

Так что, если вы похожи на меня, давайте воспользуемся моментом и начнем использовать сверхинтуитивные ems и rems везде, где это практично и разумно.

Если вы не можете победить их — присоединяйтесь к ним

О, и если кто-то прокомментирует эту статью, вы должны включить каламбур «с ними». 🙂

Разница между единицами измерения em и rem в CSS

При установке размера любого элемента в CSS у нас есть два варианта. Первый — абсолютные единицы, а второй — относительные единицы. Абсолютные единицы фиксированы и не связаны ни с чем другим. Они всегда идентичны в любом случае. Они включают см, мм, пикс и т. д. С другой стороны, относительные единицы относятся к чему-то еще. Это может быть размер родительского элемента или размер основного HTML. Относительные единицы охватывают em, rem, vw, vh и т. д. Это масштабируемые единицы, которые помогают в адаптивном дизайне. Многие из нас могут запутаться между относительными единицами, особенно 9.0099 em и rem шт. Давайте разберем разницу между этими двумя. По сути, и rem, и em являются масштабируемыми и относительными единицами размера, но с em единица измерения относится к размеру шрифта его родительского элемента, а единица rem относится только к размеру корневого шрифта HTML-документа. «r» в слове rem означает «корень».

Давайте разберемся в них обоих подробно.

1. Единица em: Единица em позволяет установить размер шрифта элемента относительно размера шрифта его родителя. Когда размер родительского элемента изменяется, размер дочернего элемента изменяется автоматически.

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

• Размер шрифта элемента .child будет 40px (2*20px).
• Поля .child будут 60px . Это в 1,5 раза больше размера шрифта нашего элемента (1,5*40 пикселей).

Example:

HTML

< html >   < head >      < заголовок >Эм против Рэм заголовок > голова > 0031 < стиль >      . parent {          1 размер шрифта; } . Child-EM { Размер шрифта: 2ем;          поля: 1,5 em;      } Стиль > < Корпус > < Класс = Класс = . родитель < DIV Класс = "Child-EM" > This is Child in em unit system          div >      div > body > HTML >

Выход:

EM BIT элемент, который является элементом. И если элемент не имеет указанного размера шрифта, используется значение браузера по умолчанию 16 пикселей. Так что здесь рассматривается только значение корня, а отношения с родительским элементом нет.

В отличие от em, здесь размер относителен для всех объявлений, а не только для первого. Давайте разберемся с этим на нашем предыдущем примере.

• Размер шрифта элемента .child будет 60px (2*30px).
• Поля .child будут 45px . Это в 1,5 раза больше размера шрифта HTML-элемента (1,5*30 пикселей).

Пример:

HTML

< HTML > < HEAD > < название < . / Head > < Стиль > HTML { { { 0032 размер шрифта: 30 пикселей; } . PPARENT { FONT размер: 20PX; } . Child-Rem { Размер шрифта: 2Rem;          поля: 1,5 бэр;      } style >   < body >      < div class = "parent" > Это родитель < DIV Класс = "Child-Rem" = " = " > Это «Ребенок в системе подразделения REM DIV > 110031> 1110031> 110031> . Добавить комментарий Отменить ответ Ваш адрес email не будет опубликован. Обязательные поля помечены * Комментарий * Имя * Email * Сайт