Относительные размеры с помощью единиц EM

Относительные размеры с помощью единиц EM

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

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

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

Примеры

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

SVG-иконки

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

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

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

<svg width="1em" height="1em" 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> или даже в h2!

Завершение

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

Автор: Andy

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

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