Отступы и единицы em в CSS

Пусть у нас есть следующие теги:

<div> <p> text </p> </div>

Пусть размер шрифта абзаца задан в px:

p { font-size: 20px; }

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

p { font-size: 20px; margin: 2em; /* соответствует 40px */ }

Пусть теперь абзацу задан размер в em:

div { font-size: 20px; } p { font-size: 2em; /* соответствует 40px */ }

Давайте опять зададим margin нашему элементу. В этом случае он по-прежнему будет рассчитываться от текущего значения шрифта самого элемента. При этом само значение шрифта будет рассчитываться относительно родителя:

div { font-size: 20px; } p { font-size: 2em; /* соответствует 40px */ margin: 2em; /* соответствует 80px */ }

Пусть у нас есть HTML код, для которого мы будем решать задачи:

<section> <div> <p> text </p> </div> </section>

Определите, какой размер шрифта и отступа в px будут иметь теги div в результате выполнения следующего кода:

section { font-size: 10px; } div { font-size: 2em; margin: 2em; }

Определите, какой размер шрифта и отступа в

px будут иметь теги div в результате выполнения следующего кода:

section { font-size: 10px; } div { font-size: 2em; margin: 3em; }

Определите, какой размер шрифта и отступа в px будут иметь теги div в результате выполнения следующего кода:

section { font-size: 10px; } div { font-size: 2em; margin: 0. 5em; }

Определите, какой размер шрифта и отступа в px будут иметь теги p в результате выполнения следующего кода:

section { font-size: 10px; } div { font-size: 2em; } p { font-size: 2em; margin: 2em; }

Определите, какой размер шрифта и отступа в px будут иметь теги p в результате выполнения следующего кода:

section { font-size: 10px; } div { font-size: 1.5em; } p { font-size: 1em; margin: 1.5em; }

CSS. %, px, em, rem, viewport как понять, что использовать

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

Описание каждого

  • Следует избегать дюймов, точек (1/72 дюйма или примерно 0,353 мм), миллиметров и сантиметров, если только вам не нужно (попробовать) и получить изображение «реального размера» или должным образом масштабированное изображение. В CSS они вычисляются из числа пикселей на основе размера пикселя дисплея. Проблема заключается в том, что это ненадежно, за исключением печатных носителей (принтеры почти всегда знают свой точечный шаг), поскольку современные дисплеи могут иметь разные размеры пикселей по горизонтальной и вертикальной оси, и многие дисплеи отображают относительно их DPI / DPM.
  • PX, Пиксели следует использовать только тогда, когда вам нужны очень тонкие линии (например, границы) или вы пытаетесь установить точный размер изображения, чтобы предотвратить его масштабирование (хотя второй случай не работает надежно и должен использовать один из следующих вариантов: другие физические единицы вместо этого при работе с печатными носителями (1px в печатных носителях для большинства реализаций CSS равен 1pt). Они не адаптивны, не согласованы и иногда мешают функционированию масштабирования.
  • VW, VH Единицы видового экрана следует экономно использовать для таких вещей, как наложения, которые необходимо масштабировать только в зависимости от размера дисплея.
    Даже в этом случае их сложно сделать правильно и могут вызвать проблемы (если их использовать неправильно, они вызовут проблемы при уровнях масштабирования не по умолчанию). У них также есть несколько странных причуд, которые варьируются от браузера к браузеру (например, все, кроме Firefox неправильно реализует 100vw (они включают ширину полосы прокрутки, но не должны). Вы почти никогда не захотите использовать их для таких вещей, как размеры шрифтов, поскольку они могут демонстрировать некоторые действительно неожиданные действия для пользователей (представьте, что размер шрифта меняется, когда пользователь изменяет размер окна браузера или переключается в полноэкранный режим или из него).
  • % следует использовать, когда необходимо масштабировать свойство на основе значения того же свойства в родительском элементе (или того, какое значение для этого свойства вычислено для родительского элемента). Например, управление размером боковых панелей в тексте или помощь в настройке определенного количества элементов по умолчанию на строку / столбец в макете flexbox. Проценты технически работают для размеров шрифта, но я бы рекомендовал избегать их использования для этого, так как EM и REM работают так же хорошо и ведут себя немного более логично для большинства людей.
  • EM следует использовать, когда вам нужно масштабировать свойство вне размера шрифта элемента (или размера шрифта его родителя, если вы используете их для установки размера шрифта элемента). Обычно это просто используется для настройки размера шрифта небольших разделов текста. Примером использования могут быть страницы, которые есть на некоторых сайтах с большим списком тегов, с размером текста каждого тега в зависимости от его популярности. Многие такие сайты используют один элемент <span> для каждого тега и изменяют размер шрифта, используя единицы EM.
  • REM следует использовать почти для всего остального. Они работают как EM-модули, но масштабируются от размера шрифта корневого элемента документа (так, в большинстве случаев, элемента <html> или <body>), что означает, что они согласованы независимо от того, где они используются в иерархия (IOW, 1rem всегда имеет одинаковый размер, независимо от того, где он отображается в иерархии), и, как следствие, большинству людей легче рассуждать.
Плагин рейтинга создан автором этого блога. Буду очень признателен, если вы сможете его поддержать (ссылка)

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

css, html, Модуль

Romuald Shmidtelson
Поделиться постом:

Что такое единица Em в CSS?. И как это связано с типографикой. | by Nainy Sewaney

И как это связано с типографикой.

Опубликовано в

·

Чтение: 6 мин.

·

24 января 2022 г.

Как веб-разработчик, вполне возможно, что вы сталкивались с единицей em в CSS.

Это одна из наиболее часто используемых единиц для адаптивного дизайна.

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

Поиски понимания «Что такое эм и откуда они взялись?»

Чтобы найти ответы на свои вопросы, я решил отправиться в прошлое.

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

Каждое письмо имело заранее определенный контейнер из металла или дерева вокруг него.

Этот контейнер имел фиксированную высоту и разную ширину в зависимости от шрифта.

Дизайнер шрифта определил размеры контейнера. Этот контейнер назывался Ящик Эм (Эфемерный) .

Каждая буква в своем почтовом ящике. Фото Fabio Santaniello Bruun на Unsplash

Хорошо, но какое отношение все это имеет к ним?

Эм, друг мой, это не что иное, как высота коробки.

Итак, 1em = высота блока em (каким бы числом это ни было).

Круто. Так что же это означает для цифровых шрифтов в наших браузерах?

Давайте перейдем к нашей следующей остановке, будущему, чтобы понять его.

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

Каждая буква цифрового шрифта окружена воображаемой рамкой em.

И высота этого поля em определяется размером вашего шрифта.

Джорджия и Фаустина установлены с одинаковым размером шрифта. Иллюстрация автора.

Например, здесь у нас есть два шрифта, Georgia и Faustina.

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

Вот в чем загвоздка.

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

Вот почему вы можете увидеть различия в размерах слов даже при одинаковом размере шрифта.

Georgia и Faustina отображают различия в размерах, несмотря на одинаковый размер шрифта. Иллюстрация автора.

Теперь, когда мы поняли значение em, давайте посмотрим на его использование в HTML.

В веб-мире em по-прежнему соответствует высоте поля em.

Но кто определяет высоту поля em для веб-шрифтов?

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

Эээ… что?

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

Случай 1: Родительский элемент имеет размер шрифта по умолчанию

В приведенном выше примере кода у нас есть дерево DOM, состоящее из таких элементов, как:

→ →

div> — единственный элемент с указанным размером шрифта, равным 2em.

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

Если вы помните, ранее мы говорили, что em — это относительная единица, зависящая от наследования размера шрифта от своего прямого родительского элемента.

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

Так что теперь?

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

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

Использование значений по умолчанию,

размер шрифта элемента

= размер шрифта по умолчанию для прямого родителя * 2

= размер шрифта по умолчанию * 2

= 16px * 2

= 32px 9 0005

Оглядываясь назад, элемент

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

Давайте посмотрим, что произойдет, если прямому родительскому элементу будет задан размер шрифта.

Случай 2: Родительский элемент имеет явно заданный размер шрифта

Продолжая предыдущий пример кода, наше дерево элементов DOM остается таким же, как

→ →

С элементами и

, каждый из которых имеет значение 2em.

Вы можете заметить, что тот же

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

размер шрифта элемента

= размер шрифта родителя * 2

= размер шрифта * 2

= размер шрифта * 2 * 2 (размер шрифта = размер шрифта * 2)

= 16 пикселей (по умолчанию в браузере) * 4

= 64 пикселя

Ага, размер шрифта для элемента

теперь в четыре раза больше размера шрифта элемента.

Вот почему содержимое элемента

стало огромным.

Вот тут-то и начинаются проблемы.

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

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

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

Чтобы противостоять этим эффектам, у нас есть спаситель — рем.

Rem короткий на Root em или Root Ephemeral — это относительная единица, указывающая размер шрифта для корневого элемента, который представляет собой не что иное, как элемент.

Если размер шрифта самого элемента не указан явно, то используется размер шрифта браузера по умолчанию.

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

Давайте посмотрим на пример кода, чтобы получить больше ясности.

В приведенном выше примере кода дерево DOM остается прежним

→ →

Элемент имеет значение 3rem, а элемент — 1rem.

Угадайте, какой теперь будет размер шрифта для элемента

?

Учитывая размер шрифта браузера по умолчанию, равный 16px,

1rem = 16px

Таким образом,

размер шрифта элемента

= размер шрифта корневого элемента () * 2

= 32px

Ага. Несмотря на то, что прямой родительский элемент элемента

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

Теперь, когда мы лучше понимаем em и rem, пришло время узнать, когда какой из них использовать.

Не существует универсального подхода к использованию em и rem. Использование обоих этих блоков зависит от ваших целей.

Если все, что вам нужно, это масштабирование дочерних элементов по мере изменения размеров их родительских элементов, используйте em.

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

Em и rem — это разные единицы измерения, но их объединяет то, что они помогут вам добавить отзывчивости для различных разрешений в вашем дизайне.

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

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

Если у вас есть какие-либо вопросы, комментарии или предложения, не стесняйтесь оставлять их в комментариях ниже.

А пока удачного программирования!

Ссылки:

В веб-типографике — Джейсон Санта Мария

The Em Box

Em vs. Rem

Понимание основ CSS Unit

900 06 CSS — самый важный компонент современного веб-дизайна, но подразумевает это эффективно может быть сложно. Одной из наиболее примечательных концепций, которые следует усвоить в единицах CSS, является различие между rem блок CSS и em блок CSS. Веб-разработчики, которые хотят создавать гибкие и отзывчивые веб-страницы, должны учитывать различия между этими двумя модулями.

Одно из основных различий между единицей CSS rem и единицей CSS em заключается в том, что единица измерения em относится к размеру шрифта CSS родительского элемента, тогда как единица измерения

rem всегда относится к корневому элементу. Размер шрифта CSS.

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

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

px , и поэтому могут использоваться для адаптивного дизайна.

rem , напротив, относится к размеру шрифта CSS корневого элемента, который ограничивается настройками браузера, а не ограничивается только одним родительским элементом. em относится к размеру шрифта CSS его родительского элемента, поэтому, если элемент имеет размер шрифта 14px , 1em равен 14px .

Содержание

  1. Что такое CSS?
  2. Что такое единицы CSS?
  3. рем в CSS
  4. в CSS
  5. rem Единицы vs em Единицы
  6. Применение ems и rems в CSS

Что такое CSS?

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

В языках разметки, таких как HTML или XML, он используется для стилизации определенных компонентов. HTML служит структурной основой веб-сайта, а CSS обеспечивает общую эстетику сайта; в результате они тесно связаны.

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

CSS был разработан для работы в тандеме с другими языками разметки, такими как HTML. Существует три разных способа реализации CSS, а внешний стиль позволяет одновременно обновлять несколько сайтов. Вы также можете использовать внутренние или встроенные стили для оформления определенных компонентов HTML.

Что такое единицы CSS?

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

  • Пиксели (px)
  • Пункты (pt)
  • em (em)
  • rem (rem)
  • Проценты (%)
  • Единицы области просмотра (v ч , vw, vmin, vmax)

Каждая из этих единиц CSS служит определенной цели и лучше всего подходит для различных типов измерений.

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

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

Мы подробно рассмотрим rem и em в единицах CSS.

rem в CSS

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

Аббревиатура rem означает root em . Размер шрифта для элементов в единицах CSS определяется rem единиц CSS по отношению к их корневым элементам. Размер шрифта CSS по умолчанию для большинства браузеров равен 16px , поэтому элемент со значением 1rem также будет иметь размер шрифта CSS 16px .

Единицы rem полезны для масштабирования элементов CSS по отношению к стандартному размеру шрифта CSS. Длина значения или типа данных выражается в рем . rem совместим со всеми свойствами, которые принимают длину в качестве значения.

Размер шрифта rem корневого элемента восстанавливает свои значения. Следовательно, 1rem признает одно и то же значение во всем вашем коде CSS.

Рекомендуется использовать rem , а не px , поскольку некоторые браузеры не изменяют размер автоматически при изменении настроек. Некоторым людям может потребоваться увеличить текст до 400%, чтобы прочитать его.

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

 

  <голова>
    Эм против Рэм
    <стиль>
      HTML {
      размер шрифта: 30px;
      цвет фона: #E3F6FF;
      }
      . родитель {
      размер шрифта: 20px;
      цвет фона: #E3F6FF;
      }
      .child-rem {
      размер шрифта: 2rem;
      поле: 1,5 бэр;
      цвет фона: #E3F6FF;
      }
    
  
  <тело>
    <дел>
      это родитель
      <дел>
        Это система единиц измерения Child in rem.
rem в CSS

em в CSS

Единица CSS em имеет то же значение, что и определенный размер шрифта родительского элемента. Например, если элемент div имеет шрифт : 16px; указано, 1em будет 16px как для div , так и для любых дочерних элементов div .

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

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

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

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

 

  <голова>
    Эм против Рэм
  
  <стиль>
    HTML {
    размер шрифта: 30px;
    цвет фона: #E3F6FF;
    }
    .родитель {
    размер шрифта: 20px;
    }
    .child-em {
    размер шрифта: 2em;
    поле: 1.5em;
    }
  
  <тело>
    <дел>
      это родитель
      <дел>
        Это ребенок в системе единиц em
em в единицах CSS

rem Единицы vs em Единицы

Параметр рем эм
Определение Размер шрифта относительно корневого элемента (html) Относительно размера шрифта родительского элемента
Консистенция Согласован, так как всегда относится к одному и тому же базовому размеру шрифта Может вызвать проблемы с каскадными значениями размера шрифта
Размер шрифта по умолчанию 16px (размер шрифта корневого элемента по умолчанию) На основе размера шрифта родительского элемента
Поддержка браузера Широко поддерживается в современных браузерах Универсальная опора
Пример использования Размер элементов относительно размера шрифта корневого элемента для единообразного и масштабируемого дизайна Для изменения размера элементов относительно размера шрифта родительского элемента

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

Как единица бэр преобразуется в значение пикселя?

Единица rem в CSS переводится в пиксели на основе размера шрифта корневого элемента ( html ). Размер шрифта html по умолчанию для корневого элемента обычно равен 9.0211 16px , поэтому 1rem равно 16px . Чтобы преобразовать значение rem в пиксели, умножьте значение rem на размер шрифта корневого элемента.

Вот пример:

 html {
  размер шрифта: 16px;
}
тело {
  размер шрифта: 1.2rem;
}
п {
  размер шрифта: 0.8rem;
}

В этом примере элемент body будет иметь размер шрифта 16 * 1.2 = 19.2px , а элемент p будет иметь размер шрифта 16 * 0,8 = 12,8 пикселей .

Как единица em преобразуется в значение в пикселях?

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

Вот пример:

 html {
  размер шрифта: 16px;
}
тело {
  размер шрифта: 1.2em;
}
п {
  размер шрифта: 0.8em;
}

В этом примере элемент body будет иметь размер шрифта 16 * 1.2 = 19.2px , а элемент p будет иметь размер шрифта 19.2 * 0.8 = 15.36px .

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

Хотя размер шрифта родительского элемента может косвенно влиять на значение em единиц через наследование.

Применение ems и rems в CSS

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

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

  1. Когда дело доходит до размеров и расстояния, используйте rem . Медиа-запросы должны быть сделаны с использованием em .
  2. Выберите rem единиц для создания элементов, которые функционируют на основе восприятия пользователя, и em единиц для улучшения элементов, развертывание которых зависит от их родительских элементов.
  3. Легкодоступный веб-сайт может быть разработан с функциями, которые можно настроить в соответствии с требованиями пользователя, используя rem единиц вместо пикс. ед.
  4. Разработчики могут поспешно настраивать значения размеров с помощью em единиц и гарантировать, что их элементы дизайна будут настроены точно. Основным преимуществом, предоставляемым модулями em , является возможность использовать размер шрифта, отличный от размера элемента html, для определения значений размера. Из-за этого блоки em следует использовать исключительно в связи с определенной конструктивной особенностью.
  5. rem единиц должны использоваться на веб-страницах вместо px единиц, так как они обеспечивают стабильный размер независимо от наследования элементов. Важным применением блоков rem является то, что они предлагают механизм для выбора размера пользовательского шрифта, который влияет на каждый отдельный компонент дизайна платформы.

Заключение

Em и rem — это два разных модуля CSS, идентичных, настраиваемых и связанных. Опираясь на размеры шрифта в вашем дизайне, браузер интерпретирует rem и em единиц в значениях пикселей.

Em Единицы CSS оцениваются в зависимости от размера шрифта элемента. Наследование размера шрифта CSS от любого родительского элемента может повлиять на единицы rem.

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

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

Отслеживайте все свое приложение с помощью Atatus

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

No related posts.