CSS rem — одиниця від розміру шрифту кореневого елемента
Опис та застосування
rem — одиниця довжини, що дорівнює розміру шрифту КОРЕНЕВОГО елемента <html>. Саме цим вона й різниться від em, яка рахується від батьківського.
Загальний опис
автор: NagarD
Синтаксис
1.5remПереглядачі
Переглядачів ще не додано.
Приклади
+ запропонувати свій приклад у пісочниці
Три рівні вкладеності: в em розміри перемножуються й текст тане, у rem кожен рівень однаковий.
HTML
<div class="pair">
<ul class="em">
<li>em: рівень 1
<ul><li>рівень 2
<ul><li>рівень 3</li></ul>
</li></ul>
</li>
</ul>
<ul class="rem">
<li>rem: рівень 1
<ul><li>рівень 2
<ul><li>рівень 3</li></ul>
</li></ul>
</li>
</ul>
</div>CSS
.pair {
display: flex;
gap: 32px;
font-family: system-ui, sans-serif;
}
/* множник накопичується: 0.8 → 0.64 → 0.512 */
.em, .em ul {
font-size: 0.8em;
}
/* точка відліку одна — <html>, вкладеність не впливає */
.rem, .rem ul {
font-size: 0.8rem;
}Уся шкала прив'язана до кореня: досить змінити font-size в html — і разом із текстом ростуть відступи, рамки й радіуси.
HTML
<article class="card">
<h3>Картка</h3>
<p>Розміри тут задані тільки в rem.</p>
<button>Дія</button>
</article>CSS
/* спробуйте змінити 16px на 20px — масштабується все одразу */
html {
font-size: 16px;
}
.card {
font-family: system-ui, sans-serif;
max-width: 20rem;
padding: 1.25rem;
border: 0.0625rem solid #94a3b8;
border-radius: 0.5rem;
}
.card h3 {
margin: 0 0 0.5rem;
font-size: 1.25rem;
}
.card p {
margin: 0 0 1rem;
font-size: 1rem;
}
.card button {
padding: 0.5rem 1rem;
border: 0;
border-radius: 0.375rem;
background: #2563eb;
color: #fff;
font-size: 0.875rem;
}Коментарі
Коментарів ще немає — будьте першим!