CSS (каскадні таблиці стилів) є одним із будівельних блоків інтерфейсів користувача в веб-додатках, мобільних і настільних додатках. Ця мова стилів має різні значення та властивості, що полегшує надання додаткам різних стилів та властивостей. REM — це одне зі значень, з яким ви часто стикаєтесь, коли будете стилізувати свої веб-сторінки за допомогою CSS.
У цій статті я поясню REM у CSS, обговорю важливість адаптивної типографіки у веб-дизайні, опишу, як обчислюються одиниці REM, і згадаю деякі переваги використання REM у CSS.
Що таке REM у CSS?
Root-EM (REM) — це одиниці, які вказують розмір шрифту елемента відносно розміру шрифту кореневого елемента. REM є відносною одиницею, що означає, що всі значення, які її використовують, змінюватимуться, коли змінюється розмір шрифту кореневого елемента. Розмір шрифту за замовчуванням у більшості браузерів становить 16 пікселів. Таким чином, якщо кореневий елемент становить 16 пікселів, розмір REM буде 1.
Одиниці REM протилежні абсолютним одиницям, таким як пікселі. Візьмемо, наприклад, цей код:
<div>Hello World</div>
Це наш стиль:
div {
border: 1.5px solid black;
width: 200px;
}
Ширина блоку (200 пікселів) залишиться незмінною незалежно від того, збільшиться чи зменшиться розмір екрана. Ця ширина не залежить ні від чого в нашому документі HTML.
Те саме стосується бордюру нашого контейнера; він залишатиметься 1,5 пікселя незалежно від екрана чи середовища.
Важливість адаптивної типографіки у веб-дизайні
Адаптивна типографіка включає багато речей, наприклад макет тексту, розмір і інтервали. Ось деякі з причин, чому веб-дизайнери впроваджують адаптивний веб-дизайн:
- Покращена взаємодія з користувачем: веб-користувачів приваблюють програми, якими легко керувати. Програма, яка пристосовується до різних розмірів екрана та середовища, забезпечує приємний і бездоганний досвід роботи.
- Спрощує налаштування для різних вікон перегляду: адаптивна типографіка перевіряє доступний простір у вікні перегляду та відповідно налаштовує. Таким чином, у вас не буде випадків надмірно розтягнутого тексту на великих екранах або дрібного тексту на маленьких екранах.
- Покращена читабельність: хороший веб-сайт має бути легким для доступу та читання. Інвестування в адаптивну типографіку гарантує, що текст у вашій програмі буде адаптуватися відповідно до розміру та орієнтації екрана.
- Узгоджене брендування: у міру того, як ваш вихідний код збільшується, ви можете мати різні варіанти шрифтів у своїй програмі. Чуйний дизайн гарантує, що у вас є послідовні підходи до дизайну незалежно від розміру екрана чи поведінки користувача.
- Інтегрується з медіа-запитами: адаптивну типографіку можна поєднувати з медіа-запитами. Веб-дизайнери можуть створювати різні стилі за допомогою медіа-запитів, де шрифти налаштовуються на основі таких характеристик, як орієнтація екрана та розмір.
- Покращена доступність: Адаптивна типографіка є однією з основ доступності програми. Таким чином, користувачі з різними можливостями можуть регулювати розміри екрана та шрифти відповідно до своїх потреб.
Як обчислюються одиниці REM
Одиниці REM обчислюються по відношенню до розміру шрифту (кореневого) елемента. Ця функція дозволяє нам створювати послідовні та масштабовані дизайни, встановлюючи значення на основі одного кореневого значення.
Більшість браузерів за умовчанням налаштовано на 16 пікселів. Однак ви можете встановити розмір шрифту кореневого значення на цифру, наприклад 10 пікселів. Ви можете мати щось на зразок цього:
html {
font-size: 10px;
}
У такому випадку 10px=1 REM
Ми можемо використовувати цей код, щоб продемонструвати:
<!DOCTYPE html> <html lang="en"> <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>Document</title> </head> <body> <h1>Welcome to techukraine.net</h1> </body> </html>
Цей код не має стилів і містить єдиний елемент, H1, який говорить «Ласкаво просимо до techukraine.net».
Розмір шрифту за замовчуванням буде 16 пікселів, що означає, що 1REM=16 пікселів. Коли ми відтворюємо цю сторінку, ми отримуємо ось що:
Тепер ми можемо додати таблицю стилів styles.css і продемонструвати, як працює REM. Ось як ви пов’язуєте файли styles.css і index.html у розділі
вашого документа HTML:<link rel="stylesheet" href="https://wilku.top/the-path-to-elegant-responsive-text/styles.css">
Тоді ви можете отримати цей код:
html {
font-size: 10px;
}
У цьому випадку, коли ми визначаємо фігури REM, вони будуть відносно 10 пікселів. Розмір шрифту нашого H1 також зменшиться, як показано на цьому знімку екрана.
Тепер ми можемо змінити розмір нашого H1, використовуючи значення REM наступним чином:
h1 {
font-size: 3.5rem; /* Equivalent to 35 pixels (3.5rem * 10px = 35px) */
}
Наш H1 тепер буде більшим на 35px=3,5REM.
Переваги використання REM у CSS
Більшість людей звикли використовувати пікселі (px) і відсотки як одиниці вимірювання під час написання коду CSS. Чому б не зупинитися на цих двох варіантах замість одиниць REM? Ось кілька причин використовувати REM:
- Збільшує масштабованість: ви можете змінити розмір шрифту кореневого елемента, роблячи одиниці REM масштабованими. Такий підхід дозволяє легко змінювати одиниці REM пропорційно. Блоки REM також будуть налаштовуватися, коли користувачі змінюватимуть розмір шрифту свого браузера.
- Легко керувати: ви можете змінити кореневий елемент у тегах або , і одиниці REM автоматично налаштуються. Цей підхід позбавить вас від болю, пов’язаного з коригуванням кожного елемента у файлі CSS. Таким чином, ви можете змінити розмір шрифту, скажімо, усіх H1 за одну зміну.
- Послідовний розмір: блоки REM контролюють розмір шрифту та інтервал. Таким чином, ви можете мати постійні розміри шрифтів на своїх веб-сторінках, оскільки вони відповідають кореневому елементу.
- Робить можливим адаптивний дизайн: ви можете створювати дизайни, які адаптуються до різних розмірів екрана та пристроїв. Коли одиниці REM використовуються разом із медіа-запитами, ви можете регулювати розмір шрифту кореневого елемента, а інші одиниці регулюватимуться пропорційно.
CSS REM проти EM проти відсотків
Під час написання коду CSS ви могли стикатися з пікселями, REM, EM та відсотками. Хоча всі ці одиниці використовуються для визначення розмірів шрифтів і інтервалів, вони застосовуються в різних сценаріях і мають різні функції. Давайте порівняємо REM з різними одиницями:
REM проти EM
REM і EM є відносними одиницями, тобто вони змінюються залежно від заданого значення. Однак REM прив’язаний до кореневого елемента (), тоді як EM прив’язаний до батьківського (контейнерного) елемента. Наприклад, у вас є div, який виконує роль батьківського елемента, і інший div усередині цього елемента, який діє як дочірній елемент. Подивіться на цей код:
<div class="parent"> <p>This is the parent element.</p> <div class="child"> <p>This is the child element.</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 проти відсотків
Відсоткові одиниці відносяться до розміру/інтервалу батьківського елемента. Отже, якщо у нас є батьківський елемент, такий як
, який має розмір шрифту 16 пікселів, ми можемо встановити для дочірнього елемента, наприклад, розмір шрифту 50%, що означає, що він дорівнює 50 /100*16=8 пікселів.
Ви можете проілюструвати це за допомогою цього коду:
body {
font-size: 16px;
}
p {
font-size: 50%;
}
Ми можемо узагальнити співвідношення між REM, EM і відсотками за допомогою цієї таблиці:
FeatureREMEMPercentageRelative toRoot elementParent element /containerParent element/ containerInheritanceFrom rootFrom parentFrom parentUse caseSuitable for consistent layoutsSuitable for relative sizesSuitable for responsive designscalabilityYesYes Relative
Коли не можна використовувати одиниці REM
У вас може виникнути спокуса використовувати одиниці REM у всіх своїх вимірюваннях CSS через їх численні переваги. Однак ось деякі з випадків, коли вони можуть бути недоречними:
- Маючи справу з відбитками: якщо ви хочете щось надрукувати, то вам потрібна впевненість, що ви маєте справу з абсолютними значеннями. У таких випадках дюйми або міліметри дають вам точний контроль над розмірами.
- Якщо вам потрібен точний контроль: якщо ви хочете контролювати розмір елемента, який тісно пов’язаний із батьківським елементом, REM не буде гарним варіантом. У таких випадках абсолютні або фіксовані одиниці, такі як пікселі, будуть ідеальним вибором.
- Що стосується анімації та переходів: одиниці REM не підходять, якщо потрібно, щоб розмір анімації та переходів змінювався поступово. Коли ви використовуєте одиниці REM, певна зміна розміру шрифту кореневого елемента призведе до різких змін у переходах або анімації.
- Що стосується застарілих браузерів: деякі старіші браузери не підтримують одиниці REM. У таких випадках можна використовувати відсотки або одиниці на основі пікселів.
Висновок
Тепер ми сподіваємося, що ви розумієте, як використовувати REM у CSS, обчислювати їх і де їх використовувати. Значення REM є відносними значеннями, тобто ви можете мати узгоджені розміри шрифтів у своїх програмах.
З іншого боку, пікселі — це абсолютні значення, які не змінюються залежно від розміру вікна перегляду або оточуючих елементів.
Однак такі значення REM не застосовуються у всіх випадках, оскільки в деяких випадках відсотки та пікселі підходять краще.
Дізнайтеся більше про стилі за допомогою цих ресурсів CSS.
Чи була ця стаття корисною?
Спасибі за ваш відгук!