Единицы em для иконок и UI: масштаб от шрифта родителя

Разбор задачи

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

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

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

Наиболее подходящие примеры, иллюстрирующие преимущества данного подхода:

Первый шаг - настроить иконки SVG так:

<svg width="1em" height="1em" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24"></svg>

<h2>SVG Иконки</h2>
<main>
	<a href="#" class="fancy-link">
 <span class="fancy-link__text">More info</span>
 <svg class="[ icon ] [ fancy-link__icon ]" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
 <path fill="currentColor" fill-rule="nonzero" d="M7.43547133 19.4355653L14.7947168 12 7.43547133 4.56443467c-.58062844-.58664991-.58062844-1.53779734 0-2.12444724.58062844-.58664991 1.52201314-.58664991 2.10264158 0L19 12l-9.46188709 9.5600126c-.58062844.5866499-1.52201314.5866499-2.10264158 0-.58062844-.5866499-.58062844-1.5377974 0-2.1244473z"></path>
 </svg>
	</a>
	<hr />
	<a href="#" class="fancy-link fancy-link--large">
 <span class="fancy-link__text">More info</span>
 <svg class="[ icon ] [ fancy-link__icon ]" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
 <path fill="currentColor" fill-rule="nonzero" d="M7.43547133 19.4355653L14.7947168 12 7.43547133 4.56443467c-.58062844-.58664991-.58062844-1.53779734 0-2.12444724.58062844-.58664991 1.52201314-.58664991 2.10264158 0L19 12l-9.46188709 9.5600126c-.58062844.5866499-1.52201314.5866499-2.10264158 0-.58062844-.5866499-.58062844-1.5377974 0-2.1244473z"></path>
 </svg>
	</a>
</main>

<h2>Изображения</h2>
<main>
	<section class="user">
 <div class="profile">
 
 <p class="h2 profile__heading">Sofia Teixeira</p>
 </div>
 <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Donec sed odio dui. Vestibulum id ligula porta felis euismod semper. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean lacinia bibendum nulla sed consectetur.</p>
	</section>
	<hr />
	<section class="user">
 <div class="profile profile--large">
 
 <p class="h2 profile__heading">Sofia Teixeira</p>
 </div>
 <p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla non metus auctor fringilla. Donec sed odio dui. Vestibulum id ligula porta felis euismod semper. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean lacinia bibendum nulla sed consectetur.</p>
	</section>
</main>

<h2>Код в статье</h2>
<main>
	<p class="h2">Relative <code><code></code> sizing with EMs</p>
	<p>By using an <code>EM</code> value for <code><code></code> samples in text: regardles of what <code>font-size</code> the code sample finds itself in, it’ll be relatively sized</p>
</main>

Замечания перед выкладкой

Правки через контролируемую среду и с версионированием. Для статей-бэкенда проверяйте включённые модули и права; для чистых CSS-сниппетов — консоль браузера и отсутствие конфликтов с утилитарными классами основного шаблона проекта на Битрикс.