08.05.2019
Относительные размеры элементов в EM
Современная верстка сочетает в себе адаптивный дизайн, различные UI киты и системы, основанные на компонентах. Это приводит к тому, что когда мы пишем CSS-код для различных элементов интерфейса, зачастую мы абсолютно не знаем, где данный элемент будет использоваться. Благодаря этому можно упрощать верстку, задавая внешним элементам свойства цвета и размера шрифта, а вложенные элементы будут наследовать это значение.
Но если использовать фиксированные размеры элементов, могут возникнуть проблемы при масштабировании текста — эти фиксированные элементы будут расходиться.
Относительный размер помогает в этой ситуации и свойство font-size сделает всю работу за нас. Используя единицы em для определения размеров элементов, размер которых ранее задавался в px, мы сможем масштабировать объекты, сохраняя при этом пропорцию между размером шрифта и элементом, расположенным рядом с текстом, благодаря font-size его родителя. У нас также есть возможность использовать единицы em для width и height.
Примеры
Наиболее подходящие примеры, иллюстрирующие преимущества данного подхода:
SVG Иконки
Первый шаг - настроить иконки SVG так:
.icon {
width: 1em;
height: 1em;
}
При этом их width и height будут ровно 100% от размера шрифта их родителя. Можно даже не создавать отдельный класс и стили в CSS и установить размеры прямо в теге <svg></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> для демонстрации элементов кода, можно задавать их относительный размер, чтобы выровнять с основным текстом. Элементы <code> обычно выглядят немного меньше основного текста, особенно если использовать шрифт с засечками. Для этого можно увеличить размер шрифта тега <code> до 1.2em . Таким образом, он будет хорошо масштабироваться, если находится в <p> или даже в <h2>.
Заключение
Этот удобный трюк позволит вам создавать быстро и удобно красивые интерфейсы, поэтому возьмите его на заметку. Относительные величины удобны не только для создания дизайна, но и для доступности в других интерфейсах. Пользователь может установить собственное значение размера родительского элемента и получить пропорциональный размер в собственном дизайн системе.
Перевод статьи: https://andy-bell.design/wrote/relative-sizing-with-em-units/
<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"> <img class="profile__image" src="http://source.unsplash.com/IWBSuyANw8c/800x800" alt="Profile shot of Sofia Teixeira" /> <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"> <img class="profile__image" src="http://source.unsplash.com/IWBSuyANw8c/800x800" alt="Profile shot of Sofia Teixeira" /> <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>
main {
background: #FFF;
padding: 16px 20px;
margin-bottom: 30px;
}
/* SVG Иконки */
.fancy-link {
font-size: 1.5rem;
display: inline-flex;
align-items: center;
color: #17717a;
font-weight: bold;
text-decoration-skip-ink: auto;
}
.fancy-link:hover,
.fancy-link:focus {
text-decoration: none;
}
.fancy-link--large {
font-size: 2.5rem;
}
.fancy-link__icon {
font-size: 1em;
}
.icon {
width: 1em;
height: 1em;
}
/* Изображения */
.profile {
font-size: 2rem;
display: flex;
align-items: center;
}
.profile--large {
font-size: 3rem;
}
.profile > * + * {
margin-left: 0.5em;
}
.profile__heading {
font-size: 0.5em;
line-height: 1.1;
}
.profile__image {
width: 3em;
height: 3em;
object-fit: cover;
border-radius: 999px;
flex-shrink: 0;
border: 2px solid rgba(0, 0, 0, 0.2);
}
.user {
max-width: 75ch;
}
.user > * + * {
margin-top: 1em;
}
/* Код в статье */
main > * + * {
margin-top: 0.5em;
}
main code {
font-size: 1.2em;
color: #7E1946;
font-weight: 700;
}
main .h2 {
font-size: 2em;
line-height: 1.1;
font-weight: 600;
}
main p {
font-size: 1.3rem;
}
Демонстрация
SVG Иконки
More info
Изображения
Sofia Teixeira
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.
Sofia Teixeira
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.
Код в статье
Relative <code> sizing with EMs
By using an EM value for <code> samples in text: regardles of what font-size the code sample finds itself in, it’ll be relatively sized
Нам будет приятно
Поделитесь
Комментарии