Em в css – Какие единицы измерения предпочтительнее использовать для адаптивной верстки CSS 3?

em, px, pt, cm, in…

См. также оглавление со всеми советами.

На этой странице:

em, px, pt, cm, in…

Указывать длину в CSS можно в разных единицах. Некоторые из них пришли из типографской традиции, как пункт (pt) и пика (pc), другие, напр. сантиметр (cm) и дюйм (in), знакомы нам в повседневном обиходе. Есть и «волшебная» единица, придуманная специально для CSS: px. Значит ли это, что для разных свойств нужны разные единицы?

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

Любые единицы измерения можно использовать где угодно. Свойство со значением в пикселях (margin: 5px) также допускает и значения в дюймах или сантиметрах (margin: 1.2in; margin: 0.5cm), и наоборот.

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

	Ре­ко­мен­ду­ются	Мож­но ино­гда	Не ре­ко­мен­ду­ются
Экран	em, px, %	ex	pt, cm, mm, in, pc
Печать	em, cm, mm, in, pt, pc, %	px, ex

Соотношение между абсолютными единицами таково: 1in = 2.54cm = 25.4mm = 72pt = 6pc

Если у вас есть под рукой линейка, можете проверить точность своего устройства. Вот прямоугольник высотой 1 дюйм (2.54cm): ↑
72pt
↓

Так называемые абсолютные единицы (cm, mm, in, pt и pc) в CSS означают то же самое, что и везде, но только если у устройства вывода достаточно высокое разрешение. На лазерном принтере 1cm должен быть точно равен 1 сантиметру. Но на устройствах низкого разрешения, вроде компьютерных экранов, CSS этого не требует. И вправду, разные устройства и разные реализации CSS норовят отобразить их по-разному. Лучше оставить эти единицы для устройств высокого разрешения, в частности для печати. На компьютерных экранах и мобильных устройствах может получиться не то, что ожидалось.

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

CSS не уточняет, что именно понимается под «высоким разрешением». Но так как у дешевых принтеров сегодня бывает не менее 300 точек на дюйм, а у хороших экранов порядка 200 точек на дюйм, граница, скорее всего, проходит где-то между этими значениями.

Еще одна причина не использовать абсолютные единицы где-либо, кроме печати: на разные экраны мы смотрим с разного расстояния. 1 сантиметр на экране настольного компьютера выглядит маленьким. Но на мобильном экране прямо перед глазами — это много. Лучше вместо них использовать относительные единицы, напр. em.

Единицы em и ex зависят от размера шрифта и могут быть свои для каждого элемента в документе. Единица em — просто размер шрифта. В элементе, которому задан шрифт в 2in, 1em и означает эти 2in. Указание размеров (напр., для отступов) в em означает, что они задаются относительно шрифта, и какой бы ни был шрифт у пользователя — крупный (напр. на большом экране) или мелкий (напр. на мобильном устройстве), эти размеры останутся пропорциональными. Объявления наподобие

text-indent: 1.5em и margin: 1em в CSS крайне популярны.

Единица ex используется нечасто. В ней выражаются размеры, которые должны отсчитываться от x-высоты шрифта. X-высота — это, грубо говоря, высота строчных букв вроде a, c, m, или o. У шрифтов с одинаковым размером (и, соответственно, при одинаковом em) может быть огромная разбежка в размерах строчных букв, и если важно, чтобы какая-то картинка, например, соответствовала x-высоте, единица ex к вашим услугам.

Единица px в CSS волшебная. Она не связана с текущим шрифтом, но и с физическими сантиметрами или дюймами обычно тоже не связана. Единица px определена как что-то маленькое, но видимое, т.е. горизонтальную линию толщиной 1px можно было отобразить с четкими краями (без сглаживания). Что считается четким, маленьким и видимым, зависит от устройства и способа пользования им: держите ли вы его прямо перед глазами, как мобильный телефон, на расстоянии вытянутой руки, как монитор, или где-то на промежуточном расстоянии, как электронную книгу? Поэтому

px по определению не фиксированная длина, а нечто, зависящее от типа устройства и его обычного использования.

Чтобы понять, почему единица px именно такая, представьте ЭЛТ-монитор из 1990-х: наименьшая точка, которую он мог отобразить, была размером примерно в 1/100 дюйма (0,25 мм) или чуть больше. Свое название единица px получила от тех экранных пикселей.

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

px всегда выглядит одинаково.

На самом деле CSS требует, чтобы 1px был точно равен 1/96 дюйма при любом выводе на печать. В CSS считается, что принтерам, в отличие от экранов, не нужны разные размеры для px, чтобы отображать четкие линии. Поэтому при печати px не только одинаково выглядит независимо от устройства, но и заведомо измеряется одной и той же величиной (совсем как единицы cm, pt, mm, in и pc, как объяснялось выше).

CSS также определяет, что растровые изображения (напр. фотографии) по умолчанию отображаются в масштабе 1 пиксель изображения на 1px. Фотография разрешением 600 на 400 будет 600px шириной и 400px высотой. Тем самым пиксели фотографии привязываются не к пикселям устройства вывода (которые могут быть очень мелкими), а к единицам

px. Это позволяет точно совмещать изображения с другими элементами документа, при условии, что вы используете в своих стилях единицы px, а не pt, cm и т.д.

Используйте em или px для шрифтов

Единицы pt (пункт) and pc (пика) CSS получил в наследство от печатного дела. Там традиционно применялись эти и подобные единицы, а не сантиметры или дюймы. В CSS незачем использовать pt, пользуйтесь любой единицей на свой выбор. Но есть хорошая причина не использовать ни pt, ни других абсолютных единиц, а использовать только em и px.

Вот несколько линий разной толщины. Некоторые из них могут казаться четкими, но как минимум линии в 1px и 2px должны быть четкими и видимыми:

0.5pt, 1px, 1pt, 1.5px, 2px

Если первые четыре линии выглядят одинаковыми (либо линия в 0.5pt пропала), скорее всего вы видите это на мониторе, не способном отображать точки мельче 1px. Если линии выглядят возрастающими по толщине, скорее всего вы видите эту страницу на качественном экране или на бумаге. А если 1pt выглядит толще, чем 1.5px, то это скорее всего экран мобильного устройства (похоже, последняя фраза описывает ситуацию до правки 2011 года — прим. перев.).

Волшебная единица CSS, px, часто бывает удачным выбором, особенно если нужно выровнять текст с картинками, либо просто потому, что что-либо толщиной 1px (или кратной 1px) заведомо будет выглядеть четко.

Но размеры шрифтов еще лучше задавать в em. Идея в том, чтобы 1) не задавать размер шрифта для элемента BODY (в HTML), а использовать размер шрифта по умолчанию для устройства, поскольку это наиболее удобный для читателя размер; и 2) указывать размеры шрифта других элементов в

em: h2 {font-size: 2.5em}, чтобы h2 был в 2½ раза крупнее основного шрифта страницы.

Едиственное место, где можно использовать pt (либо cm или in) для размера шрифтов — стили для печати, если нужно, чтобы напечатанный шрифт был строго определенного размера. Но даже там чаще всего лучше использовать размер шрифта по умолчанию.

Таким образом, единица px избавляет от необходимости знать разрешение устройства. Независимо от разрешения устройства вывода (96 dpi, 100 dpi, 220 dpi или 1800 dpi), длина, указанная в виде целого числа px, всегда выглядит хорошо и везде достаточно похоже. Но что, если мы хотим узнать разрешение устройства, например, чтобы решить, можно ли использовать линию в

0.5px? Выход — проверить разрешение с помощью медиавыражений. Подробности о медиавыражениях — за рамками этой статьи, но вот небольшой пример:

div.mybox { border: 2px solid }
@media (min-resolution: 2dppx) {
  /* Media with 2 or more dots per px */
  div.mybox { border: 1.5px solid }
}

Новые единицы измерения в CSS

Чтобы было еще проще писать стилевые правила, зависящие только от размера шрифта по умолчанию, с 2013 года в CSS есть новая единица: rem. Один rem (от «root em», т.е. «корневой em» или «em корневого элемента») — это размер шрифта корневого элемента в документе. В отличие от em, который может быть для каждого элемента свой, rem для всего документа один и тот же. Например, чтобы задать элементам P и h2 одинаковый внешний отступ слева, вот для сравнения CSS-код до 2013 года:

p { margin-left: 1em }
h2 { font-size: 3em; margin-left: 0.333em }

и новая версия:

p { margin-left: 1rem }
h2 { font-size: 3em; margin-left: 1rem }

Благодаря другим новым единицам стало можно указывать размеры относительно окна пользователя. Это vw и vh. Единица vw — 1/100 ширины окна, а vh — 1/100 его высоты. Еще есть vmin, соответствующая меньшему из vw и vh. И vmax (можете догадаться, что она делает).

Поскольку они новые, они еще работают не везде. Но к началу 2015 года многие браузеры уже их поддерживали.

Единицы измерения 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>
   <h3>Pixels</h3>
   <p>font-size:16px</p>
   <p>font-size:8px</p>
   <p>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>
   Lorem Ipsum
   <div>Lorem Ipsum</div>
</div>

По умолчанию body равен font-size: 16px. Далее стилизуем post:

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

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

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

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

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>

Давайте для тега ul, зададим значение 0.8em:

ul {
   font-size: 0.8em; 
}

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

ul {
   font-size: 0.8em; 
}

ul ul {
   font-size: 1em; 
}

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

Rem

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

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

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

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

<div>
   Lorem Ipsum
   <p>Lorem Ipsum</p>
</div>

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

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

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

:root {
   font-size: 50px;
}

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

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

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

<div>
   <h3>Home</h3>
   <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 */
}

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

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

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

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

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

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

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

Если вы не хотите использовать размер шрифта 10px по умолчанию, то вы можете использовать другое значение — 14px. Чтобы вычислить, сколько это будет в rem, для этого нужно 14px / 16px. Итог: 0.875rem

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

Теперь мы видим, что текст по умолчанию стал читабельным. Заголовок увеличился, потому что 2.4rem это уже не 24px. А сколько? Давайте посчитаем: 24px / 14px = 1.71rem. Давайте запишем:

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

В таком случае размер заголовка у нас стал таким же, как тогда когда у нас font-size составлял 10px. Конечно же, такое значение не вычислить в уме, однако работы с кодом по итогу будет значительно меньше.

Давайте предположим, что мы работаем с media-запросами. Например, размер шрифта нам нужно сделать чуть большедля планшетов и ПК устройств. То есть если мы будем использовать media-запросы то внутри мы можем записать min-width: 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, то есть 1200px * 0.02 = 24px. При этом если взять, например, планшет, который в среднем составляет ширину 768px, то размер шрифта составит примерно 15px, то есть это 2% от 768px.
Значения vmin и vmax не применимы к font-size поэтому их уже рассмотрим в следующей части, но знайте, что эти значения есть и они работают в связке с vw и vh, однако их можно использовать не всегда, а только в том случае если они необходимы. И не забывайте про поддержку этих значений.

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

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

 

Единицы «em» в CSS

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

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

Определение em:

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

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

.element {
font-size: 20px;
}

Это означает, что 1em, установленное в том элементе или в любом из его дочерних элементах, будет равное 20 пикселям. Если вы используете следующий код:

{
.element { font-size: 20px; 
width: 4em; 
height: 4em; 
}

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

подробнее:
Em – это единица изменения в типографии, равное текущему указанному размеру шрифта. Название em связано с буквой M. Изначально данная единица была получена из ширины заглавной буквы М при использовании определенного шрифта

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

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

А что если я не использую параметр font-size?

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

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

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

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

В целом, данная единица очень проста к пониманию. Она дает вам возможность сделать так, чтобы значения единиц em во всем HTML-документе были основаны на одном «главном» значении, указанном в «html»-элементе. Таким образом, вы можете забыть про параметр font-size, так как все em-единицы, использованные в документе, будут основаны на главном значении rem, например:

html { font-size: 62.5%; }
 body { font-size: 1.4rem; } /* =14px */
 h2 { font-size: 2.4rem; } /* =24px */

И, как и в случае с em, если вы не указываете значение font-size в «html»-элементе, то «главная» единица (root em) будет равна 16 пикселям по умолчанию.

Carpe di-em

Можно выдумать еще целую кучу выражений с em 🙂

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

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

Вконтакте

Одноклассники

Мой мир

Facebook

E-mail

Единицы размера в CSS | Учебные курсы

Существует много свойств CSS, которые требуют размер в качестве единицы:

• font-size определяет размер текста;
• border-width определяет толщину границ элементов;
• margin определяет пространство между элементами;
• left/right/top/bottom позволяют позиционировать и перемещать элементы.

Наиболее часто используемые единицы:

• px для пикселей;
• % для процентов;
• em для определения размера относительно родительского значения font-size.

Пиксели

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

Пиксель может быть использован для задания фиксированной ширины элемента:

body { width: 400px; }

Или установить размер текста:

body { font-size: 20px; }

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

Они также широко используются для позиционирования и расстояния.

Проценты

Проценты — это относительные единицы: они полагаются на родителя и/или предка элемента.

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

p { width: 50%; }

Проценты могут помочь задать другие свойства CSS, такие как размер текста.

CSS

strong { font-size: 150%; }

HTML

<p>Есть <strong>важные</strong> проблемы, стоящие перед нами.</p>

em

em является относительной единицей и зависит от значения font-size элемента.

Например, если у родителя font-size задан как 20px и вы применяете font-size: 0.8em к дочернему элементу, то этот дочерний элемент будет отображать font-size как 16px.

Не следует путать размер em с селектором em, который ориентирован на элемент <em>.

Единица em интересна для определения размера шрифта элементов HTML относительно друг друга. Для создания привлекательной и комфортной для чтения веб-страницы вам необходимо обеспечить визуальную глубину. Например, вы хотите, чтобы ваши <h2> были вдвое больше, чем основной текст, ваши <h3> в 1,5 раза больше, а боковая панель немного меньше. Это можно легко получить в CSS:

body { font-size: 16px; }
h2 { font-size: 2em; }        /* = 32px */
h3 { font-size: 1.5em; }      /* = 24px */
aside { font-size: 0.75em; }  /* = 12px */

Если вы решите изменить размер текста <body>, относительные размеры заголовков и боковой панели изменятся соответственно и ваша веб-страница останется визуально сбалансированной.

Только изменив одно значение, поменяются и все остальные значения:

body { font-size: 20px; }
h2 { font-size: 2em; }        /* = 40px */
h3 { font-size: 1.5em; }      /* = 30px */
aside { font-size: 0.75em; }  /* = 15px */

rem

Единица rem похожа на em, но вместо зависимости от родительского значения, она опирается на значение корневого элемента, которым является элемент <html>.

html { font-size: 18px; }
body { font-size: 1rem; }     /* = 18px */
h2 { font-size: 2rem; }       /* = 36px */
h3 { font-size: 1.5rem; }     /* = 27px */

Разница между rem и em в том, что значение rem фиксировано, в то время как значения em умножаются друг с другом.

Если вы установили html { font-size: 18px; }:

• 2rem всегда будет равно 36px, независимо от того, где оно используется в вашем CSS;
• 2em всегда будет равно удвоенному font-size родителя, что не обязательно равно 36px.

Быстрый пример, где 2em отличается от 2rem:

html { font-size: 20px; }
p { font-size: 0.8rem; }        /* = 16px */
p span { font-size: 2em; }      /* = 16px * 2 = 32px */
p strong { font-size: 2rem; }   /* = 20px * 2 = 40px */

<span> полагается на значение font-size у <р>, в то время как <strong> полагается на значение font-size у <html>.

Какую единицу использовать?

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

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

Перейти к заданиям

Единицы em в CSS: преимущества использования относительных размеров

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

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

Мне нравится позволять font-size делать работу за меня. Используя единицы em для размеров элементов, которые были предварительно заданы в px, мы можем разрешить масштабирование, сохраняя при этом разумный масштаб родительского элемента font-size. У нас также есть возможность использовать с этой стратегией единицы em для width и height.

Примеры

Я создал три примера контекстов, которые, на мой взгляд, являются идеальными вариантами для этого подхода.

SVG-иконки

Я привел этот совет некоторое время назад, и он взорвал умы людей. Давайте рассмотрим его немного глубже. Первый шаг — настройка SVG-иконок:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

.icon { width: 1em; height: 1em; }

.icon {   width: 1em;   height: 1em; }

При этом их width и height будут равны 100% от font-size их родителей. Вы даже можете пропустить класс CSS и вместо этого установить размеры с помощью атрибутов svg:

<svg xmlns=»http://www.w3.org/2000/svg» viewBox=»0 0 24 24″></svg>

<svg xmlns=»http://www.w3.org/2000/svg» viewBox=»0 0 24 24″></svg>

Этот подход особенно полезен, когда SVG-иконка находится внутри ссылки или кнопки, и, как показано в примере, если она размещена в контексте, то будет идеально пропорционально масштабироваться.

Изображения

Круговые аватары пользователей — это очень распространенный шаблон проектирования, и они хорошо работают, если соответствуют размеру шрифта их элементов одного уровня. В этом примере размер шрифта установлен для родительского компонента .profile. Для размеров и .profile__image, и .profile__heading используются единицы em.

Это здорово, потому что, когда мы добавляем модификатор .profile—large, который устанавливает размер шрифта компонента в 5rem, оба эти элемента масштабируются и сохраняют свой относительный размер в компоненте.

Код в статьях

Как и на этом сайте, определение размера элементов code с помощью em очень удобно. Основная причина этого, заключается в том, что элементы code выглядят немного маленькими, особенно если вы используете, например, шрифт Georgia с засечками. Из-за этого я применяю к элементу code font-size примерно 1.2em. Это будет хорошо масштабироваться, если они находятся в <p> или даже в h3!

Завершение

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

Автор: Andy

Источник: https://andy-bell.design

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Практика верстки сайта на CSS Grid с нуля

Смотреть

em | CSS | WebReference

Единица em соответствует значению свойства font-size элемента. Если это значение не задано, тогда берётся значение font-size родителя.

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>em</title>
  <style>
   div {
    font-size: 20px; /* Размер шрифта в пикселях */
    padding: 1em; /* Поля вокруг текста */
    border: 2px solid #ccc; /* Параметры рамки */
    border-radius: .5em; /* Радиус скругления */
   }
  </style>
 </head>
 <body>
  <div>Роджерс первым ввел в научный обиход понятие 
  «клиент», так как перцепция начинает потребительский код.</div>
 </body>
</html>

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

Спецификация ?

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

• Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
• Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
• Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
• Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
• Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
• Draft (Черновик спецификации) — первая черновая версия стандарта.

×

Браузеры

В таблице браузеров применяются следующие обозначения.

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

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

×

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 30.09.2019

Редакторы: Влад Мержевич

Размер | CSS | WebReference

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

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

Относительные единицы обычно используют для работы с текстом. В табл. 1 перечислены основные относительные единицы.

Табл. 1. Относительные единицы измерения

Единица	Описание
em	Размер шрифта текущего элемента
ex	Высота символа x
ch	Ширина символа 0 текущего элемента
rem	Размер шрифта корневого элемента

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

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

Единица ch равна ширине символа «0» для текущего элемента и подобно em зависит от размера шрифта.

Разница между em и rem следующая. em зависит от размера шрифта родителя элемента и меняется вместе с ним, а rem привязан к корневому элементу, т. е. размеру шрифта заданного для элемента html.

Также есть группа относительных единиц привязанных к размеру области просмотра браузера. В табл. 2 показан их список с описанием.

Табл. 2. Относительные единицы измерения

Единица	Описание
vw	1% от ширины области просмотра
vh	1% от высоты области просмотра
vmin	1% от меньшего значения из ширины и высоты области просмотра
vmax	Определяется, что больше, значение ширины или высоты области просмотра и от него вычисляется 1%

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

Абсолютные единицы представляют собой физические размеры — дюймы, сантиметры, миллиметры, пункты, пики, а также пиксели. Для устройств с низким dpi (количество точек приходящихся на один дюйм, определяет плотность точек) привязка идёт к пикселю. В этом случае один дюйм равен 96 пикселям. Очевидно, что реальный дюйм не будет совпадать с дюймом на таком устройстве. На устройствах с высоким dpi реальный дюйм совпадает с дюймом на экране, поэтому размер пикселя вычисляется как 1/96 от дюйма. В табл. 3 перечислены основные абсолютные единицы.

Табл. 3. Абсолютные единицы измерения

Единица	Описание
px	Пиксель
in	Дюйм (1 дюйм равен 2,54 см)
cm	Сантиметр
mm	Миллиметр
pt	Пункт (1 пункт равен 1/72 дюйма)
pc	Пика (1 пика равна 12 пунктам)

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Относительные единицы</title>
  <style>
    h2 { font-size: 30px; }
    p { font-size: 1.5em; }
  </style>
 </head> 
 <body>
  <h2>Заголовок размером 30 пикселей</h2> 
  <p>Размер текста 1.5 em</p> 
 </body>
</html>

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Абсолютные единицы</title>
  <style>
   h2 { font-size: 24pt; }
   p { margin-left: 30mm; }
  </style>
 </head> 
 <body>
   <h2>Заголовок размером 24 пункта</h2> 
   <p>Сдвиг текста вправо на 30 миллиметров</p> 
 </body>
</html>

Примечание

При установке размеров обязательно указывайте единицы измерения, например width: 30px. В противном случае браузер не сможет показать желаемый результат, поскольку не понимает, какой размер вам требуется. Единицы не добавляются только при нулевом значении (margin: 0).

Internet Explorer поддерживает единицу vm вместо vmin.

Спецификация ?

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

• Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
• Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
• Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
• Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
• Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
• Draft (Черновик спецификации) — первая черновая версия стандарта.

×

Браузеры ?

px, in, cm, mm, pt, pc, em, ex	3	12	1	3.5	1	1
ch	9	12	27	20	7	1
rem	9	12	4	11.6	4.1	3.6
vw, vh	9	12	20	20	6	19
vmax		16	26	15	6.1	19
vmin	9	12	20	15	6	19

px, in, cm, mm, pt, pc, em, ex
ch	4.4	2	37	7.1.1
rem	2.1	2	12	4
vw, vh	2.1	19	37	6
vmax	4.4	19	37	6.1
vmin	2.1	19	37	6

Браузеры

В таблице браузеров применяются следующие обозначения.

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

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

×

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 12.09.2018

Редакторы: Влад Мержевич