От автора: сочетание адаптивного дизайна и большего количества систем, основанных на компонентах, означает, что когда мы пишем 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.