Дизайн отзывчивого сайта с размером на основе EM

Jan 26, 2026

Инструкции

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

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

Последовательно используя EMS, вы можете разработать компоненты на странице, которая отвечает автоматически, должен изменять размер шрифта. Затем с умным хитростью для отзывчивого размера шрифта вы можете создать всю страницу, которая динамически регулируется на основе ширины Viewsort браузера. Позвольте мне показать вам, как использовать «относительное» поведение EMS для создания конструкций, которые масштабируемым и отзывчивым.

Размер шрифта Единицы

Использование EMS для размера шрифта может быть сложно. Точное значение определяется наследственным размером шрифта элемента (I.E. Размер шрифта родительского элемента). Это сложно, когда вы начинаете элементы вложения более глубоко. Если элемент имеет размер шрифта в EMS, его родитель имеет размер шрифта в EMS, и его родитель имеет еще один. Вам придется умножить все эти значения, чтобы определить фактическое вычисленное значение дочернего элемента.

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

Чтобы избежать этого, мы обычно используем другую относительную единицу для размера шрифта: REMS. REM (или «root EM») основано не на унаследованном размере шрифта, но на размер шрифта корневого элемента страницы, & lt; html & gt; Отказ Это означает, что его значение одинакова на протяжении всей страницы. Это более предсказуемо, чем и часто предпочтительнее, регулярных EMS.

Строительство модуля с EMS

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

Use rems on the outermost element to establish a known font size, then use ems to build based on that value — Используйте REMS на внешнем элементе, чтобы установить известный размер шрифта, затем используйте EMS, чтобы построить на основе этого значения

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

Мы построим панель с заголовком и телом. Марка выглядит так:

 & lt; class = "Панель" & gt;
  & lt; class = "заголовок панели" и GT;
    & lt; h3 & gt; вот власть EMS & lt; / h3 & gt;
  & lt; / div & gt;
  & lt; class = "Панель-тело" и GT;
    Рассмотрим способы использования относительного
    Единицы для динамического размера ваших модулей.
  & lt; / div & gt;
& lt; / div & gt;

Давайте стиль наружный контейнер. Мы установим размер шрифта в 1rem. установить наше местное значение EM. Затем мы определим пограничный радиус используя EMS. Я обычно люблю использовать PX для границы, хотя, чтобы получить хорошую тонкую линию.

 .panel {
  Размер шрифта: 1rem;
  Граница: 1PX сплошной # 678;
  Радиус: 0,3ЕМ;
  Переполнение: скрыто;
}

Далее стиль внутренних элементов. Мы будем использовать EMS для прокладки. Тогда мы увеличим размер шрифта заголовка до 1,25 раз нашего локального значения EM, создавая размеры вычисленного 20px.

 .panel-заголовок {
  прокладки: 0.6em 1.2em;
  Фон-цвет: #cde;
  Границы-дно: 1PX Solid # 678;
}
.Panel-заголовок и GT; H3 {
  Размер шрифта: 1.25ЕМ;
  Маржа: 0;
  Интернет-интервал: 0,03ЕМ;
}
.panel-body {
  прокладки: 0.6em 1.2em;
}

Вы можете умножить значения нагрузки по размеру шрифта для определения их вычисленных значений (9,6 пикселей вертикальный и 19,2 час горизонтальный). Правдиво, хотя это не имеет значения. Постарайтесь не увязнуть с помощью Pixel-Perfect измерений. Это может чувствовать себя неловко, но нажмите на. Чем больше вы используете EMS, тем больше вы познакомитесь с ними как единицу в своем собственном уважении.

Динамически масштабируется дизайн

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

. Panel - Большой размер шрифта: 1.2rem; }

Мы просто добавляем этот класс на панель, чтобы сделать его больше: & lt; Панель панели - большой "& gt; Отказ Это изменит локальное определение EM и, следовательно, радиус границ и изменение прокладок, а также размер шрифта его дочерних элементов. С одной декларацией мы разместили каждую часть модуля.

A panel module, with paddings and border radius defined using ems — Модуль панели, с Raddings и радиусом границы, определенный с использованием EMS

Аналогично, мы могли бы создать небольшую версию:

 .panel - маленький {размер шрифта: 0.8rem; }

Заземляя модуль, используя размер шрифта верхнего уровня в REMS, мы сделали его стабильным и предсказуемым. Определив все остальное в использовании EMS, мы сделали все его компонентные детали масштабируемыми.

It is possible to base the size of everything inside the module on one value, then change that value to scale it all — Можно основывать размер всего внутри модуля на одном значении, затем измените это значение, чтобы масштабировать все это

Это мощный рисунок. Вы можете использовать этот подход для чего-либо на вашей странице, из раскрывающихся меню на кнопки социальных сетей. Заземляйте модуль с помощью REM Value, затем используйте EM для практически всего остального из PODDINGS для размещения размеров значка.

Делает его отзывчивым

Давайте дополним принцип один уровень дальше. Мы разместили модуль (и теоретически все другие модули на странице), используя REMS и EMS. Это в конечном итоге означает, что их размер основан на размере шрифта корневого элемента. Затем мы можем настроить это одно значение, чтобы заставить всю страницу отвечать в свою очередь.

Давайте принесем другое относительное подразделение: VH. Отказ Вычисленное значение этого устройства происходит от размера экрана пользователя; Это равно 1 процентам ширины просмотра. Если мы используем устройство VH, чтобы определить размер корневого шрифта, он автоматически отзывчиво масштабирует, что SANS Media queries. Установите размер шрифта на корне 2VW :

 HTML {
  Размер шрифта: 2VW;
}

К сожалению, эффект слишком сильный. Например, на iPhone 6 это будет вычисление до 5,5 пикселей, что слишком мало. Аналогично, это неоправданно большим на больших экранах. Чтобы смягчить эффект, мы можем использовать CSS Calc () Функция:

 HTML {
  Размер шрифта: Calc (0.6em + 1VW);
}

Теперь размер шрифта выводится частично из стабильного значения, а частично от отзывчивого. Это производит гораздо лучший эффект. То 0.6em. ведет себя как своего рода минимальный размер шрифта. Теперь Root EM будет неприкосновенся от около 13px на смартфоне до 21px на среднем экране рабочего стола.

С вашей страницей состоит из масштабируемых модулей, каждый из которых заземлен для значения REM, и они тоже будут масштабироваться с помощью просмотра. Страница структурирована с трехуровневой иерархией; Вы можете изменить размер всей страницы, отдельный модуль или один элемент, сделав простое изменение в размере шрифта. Доверьтесь EMS и REMS, и браузер позаботится о работе для вас.

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

Эта статья была первоначально представлена в Чистый журнал Выпуск 288; Купить это здесь

Статьи по Теме:

10 типографии трюки каждый дизайнер должен знать
Руководство дизайнера к типографии и шрифтам
Мастер доступной веб-типографии

Дизайн отзывчивого сайта с размером на основе EM

Размер шрифта Единицы

Строительство модуля с EMS

Динамически масштабируется дизайн

Делает его отзывчивым

Инструкции - Самые популярные статьи

Как принести 2D персонаж в жизнь в VR

Начните с диффузной

Coloureise Greyscale Работа в Photoshop

Учитесь анимировать для детей

Все, что вам нужно знать о новом Node.js 8

Создание живописных эффектов в Photoshop CC

Использование векторных инструментов: подход веб-дизайнера

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

Категории