CSS, або каскадні таблиці стилів, є важливим компонентом при створенні інтерфейсів користувача для веб-сайтів, мобільних та настільних програм. Ця мова стилізації надає різноманітні інструменти та можливості для оформлення додатків, дозволяючи задавати різноманітні стилі та властивості. Серед цих можливостей особливе місце займає одиниця вимірювання REM, яку часто використовують при стилізації веб-сторінок.
У цій статті ми детально розглянемо, що таке REM в CSS, обговоримо важливість адаптивної типографіки для веб-дизайну, з’ясуємо, як обчислюються одиниці REM, та наведемо приклади переваг їх використання.
Що таке REM в CSS?
Root-EM (REM) — це одиниця вимірювання, яка визначає розмір шрифту елемента відносно розміру шрифту кореневого елемента. Іншими словами, REM є відносною одиницею, і значення, які її використовують, змінюються залежно від зміни розміру шрифту кореневого елемента. За замовчуванням, у більшості браузерів розмір шрифту встановлено на 16 пікселів. Тому, якщо кореневий елемент має розмір шрифту 16 пікселів, то 1 REM дорівнюватиме 16 пікселям.
Одиниці REM відрізняються від абсолютних одиниць, таких як пікселі. Розглянемо приклад:
<div>Привіт, Світе!</div>
Наступний стиль застосовується до цього елемента:
div {
border: 1.5px solid black;
width: 200px;
}
Ширина блоку (200 пікселів) залишиться незмінною, незалежно від того, чи збільшиться, чи зменшиться розмір екрана. Ця ширина не залежить від інших елементів в HTML-документі.
Аналогічно, товщина рамки контейнера (1.5 пікселя) також не змінюватиметься залежно від екрана чи середовища.
Важливість адаптивної типографіки у веб-дизайні
Адаптивна типографіка охоплює багато аспектів, включаючи макет тексту, його розмір та інтервали. Ось кілька причин, чому веб-дизайнери надають перевагу адаптивному веб-дизайну:
- Покращена взаємодія з користувачем: користувачі інтернету віддають перевагу додаткам, якими легко користуватися. Адаптація програми до різних розмірів екранів та середовищ забезпечує приємний та бездоганний досвід використання.
- Спрощує налаштування для різних розмірів вікна: адаптивна типографіка враховує доступний простір у вікні перегляду та відповідно налаштовується. Це запобігає надмірному розтягуванню тексту на великих екранах або його зменшенню на малих.
- Покращена читабельність: якісний веб-сайт повинен бути легким для сприйняття та читання. Застосування адаптивної типографіки гарантує, що текст у вашій програмі буде автоматично адаптуватися до розміру та орієнтації екрана.
- Послідовне брендування: у процесі розширення коду вашої програми, ви можете використовувати різні варіанти шрифтів. Адаптивний дизайн забезпечує послідовний підхід до оформлення, незалежно від розміру екрана чи поведінки користувача.
- Інтеграція з медіа-запитами: адаптивну типографіку можна використовувати в поєднанні з медіа-запитами. Веб-дизайнери можуть створювати різні стилі за допомогою медіа-запитів, де шрифти налаштовуються залежно від характеристик, таких як орієнтація та розмір екрана.
- Покращена доступність: адаптивна типографіка є однією з основних складових доступності програми. Користувачі з різними можливостями можуть налаштовувати розміри екрана та шрифти відповідно до своїх потреб.
Як обчислюються одиниці REM
Одиниці REM обчислюються відносно розміру шрифту елемента <html> (кореневого елемента). Це дозволяє створювати послідовні та масштабовані дизайни, встановлюючи значення на основі одного кореневого значення.
Більшість браузерів за замовчуванням використовують розмір шрифту 16 пікселів. Однак ви можете змінити розмір шрифту кореневого елемента, наприклад, до 10 пікселів. Ваш код може виглядати так:
html {
font-size: 10px;
}
У цьому випадку 10px = 1 REM
Для демонстрації використаємо такий приклад:
<html lang="uk"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Приклад</title> </head> <body> <h2>Ласкаво просимо на techukraine.net</h2> </body> </html>
Цей код не містить стилів і відображає заголовок H2 з текстом “Ласкаво просимо на techukraine.net”.
Розмір шрифту за замовчуванням становить 16 пікселів, отже 1 REM = 16 пікселів. При відтворенні сторінки ми побачимо наступне:
Тепер додамо таблицю стилів styles.css та покажемо, як працює REM. У розділі <head> вашого HTML-документу додайте наступний код для підключення файлу styles.css:
<link rel="stylesheet" href="https://wilku.top/the-path-to-elegant-responsive-text/styles.css">
Тепер, ми можемо використовувати такий код у нашому файлі стилів:
html {
font-size: 10px;
}
У цьому випадку, коли ми задаємо значення REM, вони будуть відносними до 10 пікселів. Розмір шрифту нашого H2 також зменшиться, як показано на цьому знімку екрана.
Тепер ми можемо змінити розмір нашого H2, використовуючи значення REM таким чином:
h2 {
font-size: 3.5rem; /* Еквівалентно 35 пікселям (3.5rem * 10px = 35px) */
}
Розмір нашого H2 збільшиться до 35px = 3,5REM.
Переваги використання REM у CSS
Більшість розробників звикли використовувати пікселі (px) і відсотки як одиниці вимірювання при написанні коду CSS. Чому варто використовувати REM замість цих варіантів? Ось кілька причин:
- Збільшує масштабованість: ви можете змінити розмір шрифту кореневого елемента, що робить одиниці REM масштабованими. Такий підхід дозволяє легко змінювати одиниці REM пропорційно. Блоки REM також будуть налаштовуватися, коли користувачі змінюють розмір шрифту в браузері.
- Легко керувати: ви можете змінити кореневий елемент у тегах <html> або <body>, і одиниці REM автоматично налаштуються. Це позбавляє від необхідності коригувати кожен елемент у файлі CSS. Наприклад, ви можете змінити розмір шрифту усіх H2 за допомогою одного рядка коду.
- Послідовний розмір: блоки REM забезпечують контроль над розміром шрифту та інтервалами. Це дозволяє мати постійні розміри шрифтів на ваших веб-сторінках, оскільки вони залежать від кореневого елемента.
- Можливість адаптивного дизайну: ви можете створювати дизайни, які адаптуються до різних розмірів екрана та пристроїв. При використанні REM разом із медіа-запитами, ви можете регулювати розмір шрифту кореневого елемента, а інші одиниці будуть змінюватися пропорційно.
CSS REM проти EM проти відсотків
Під час написання коду CSS ви могли стикатися з пікселями, REM, EM та відсотками. Хоча всі ці одиниці використовуються для визначення розмірів шрифтів та інтервалів, вони мають різне призначення та використовуються в різних випадках. Давайте порівняємо REM з іншими одиницями:
REM проти EM
REM та EM є відносними одиницями, тобто вони змінюються залежно від заданого значення. REM прив’язаний до кореневого елемента (<html>), а EM — до батьківського (контейнерного) елемента. Наприклад, у вас є div, який є батьківським елементом, та інший div всередині нього, який є дочірнім елементом. Розглянемо наступний код:
<div class="parent">
<p>Це батьківський елемент.</p>
<div class="child">
<p>Це дочірній елемент.</p>
</div>
</div>
Ви можете встановити одиниці EM наступним чином:
.parent {
font-size: 1.5em;
border: 1px solid #ccc;
padding: 10px;
margin-bottom: 20px;
}
.child {
font-size: 1.2em;
color: #333;
}
Клас .parent має розмір шрифту 1.5 em. Елемент .child має розмір шрифту 1.2 em, який є відносним до батьківського елемента. Зміни в батьківському класі будуть автоматично впливати на дочірній елемент.
REM проти відсотків
Відсоткові одиниці є відносними до розміру/інтервалу батьківського елемента. Якщо ми маємо батьківський елемент, наприклад <body>, який має розмір шрифту 16 пікселів, ми можемо встановити розмір шрифту для дочірнього елемента, наприклад <p>, на 50%, що означає 50/100*16 = 8 пікселів.
Проілюструємо це прикладом:
body {
font-size: 16px;
}
p {
font-size: 50%;
}
Узагальнимо співвідношення між REM, EM та відсотками в наступній таблиці:
| Характеристика | REM | EM | Відсотки |
| Відносно | Кореневого елемента | Батьківського елемента / контейнера | Батьківського елемента / контейнера |
| Успадкування | Від кореневого елемента | Від батьківського елемента | Від батьківського елемента |
| Використання | Підходить для послідовних макетів | Підходить для відносних розмірів | Підходить для адаптивного дизайну |
| Масштабованість | Так | Так | Відносна |
Коли не варто використовувати одиниці REM
Може виникнути бажання використовувати REM для всіх вимірювань CSS через їхні переваги. Однак, є випадки, коли вони не є доречними:
- Для друку: якщо вам потрібно роздрукувати документ, вам потрібні абсолютні значення. У таких випадках дюйми або міліметри забезпечують точний контроль над розмірами.
- Для точного контролю: якщо вам потрібно контролювати розмір елемента, який тісно пов’язаний з батьківським елементом, REM не буде кращим варіантом. В таких випадках абсолютні або фіксовані одиниці, такі як пікселі, будуть ідеальними.
- Для анімації та переходів: одиниці REM не підходять, якщо потрібна плавна зміна розміру анімації та переходів. Зміна розміру шрифту кореневого елемента призведе до різких змін у переходах або анімації.
- Для застарілих браузерів: деякі старіші браузери не підтримують одиниці REM. У таких випадках можна використовувати відсотки або одиниці на основі пікселів.
Висновок
Сподіваємось, тепер ви розумієте, як використовувати REM у CSS, як їх обчислювати та де їх застосовувати. Значення REM є відносними, що дозволяє мати послідовні розміри шрифтів у ваших програмах.
Пікселі, навпаки, є абсолютними значеннями, які не змінюються залежно від розміру вікна перегляду або навколишніх елементів.
Проте, значення REM не є універсальним рішенням. У деяких випадках відсотки та пікселі підходять краще.
Дізнайтесь більше про стилізацію з допомогою цих ресурсів CSS.
Чи була ця стаття корисною?
Дякуємо за ваш відгук!