Можливо, ви не мрієте про розміри елементів CSS вночі, але якщо ви створюєте вебсайт або додаток, ця тема точно варта уваги.
Деякі одиниці CSS добре підходять для вашого адаптивного дизайну, тоді як інші можуть проявити бунтівний характер. Здатність розрізняти різні символи може заощадити вам чимало головного болю у майбутньому.
Розгляньте пару REM та EM. Який із них вибрати і чому?
Залишайтеся з нами на наступні кілька абзаців, і ми все розкриємо!
REM проти EM вкоротце
Якщо ви шукаєте швидку відповідь, ось коротка версія:
- REM: Ця одиниця базується на кореневому елементі (зазвичай це тег
<html>). Незалежно від того, що відбувається на сторінці, ваші розміри залишаться стабільними. - EM: Ця одиниця шукає вказівок у вищестоящих. Якщо батьківський елемент змінюється, ваші розміри також адаптуються.
Якщо ви хочете пам’ятати різницю, майте на увазі, що “R” у REM означає “Root”.
Nerd Note: Чому обидві одиниці закінчуються на “EM”? Це не скорочення. У часи, коли весь текст друкувався, типографи використовували ширину великої літери M як орієнтир для розміру тексту. Доволі хитро, правда?
Отже, який з них вибрати?
Ну, це залежить.
Якщо ви хочете, щоб текст адаптувався до свого оточення, EM може бути кращим варіантом. Але якщо ви хочете, щоб розмір залишався однаковим на всьому вашому сайті, вам слід перейти на REM.
Чому?
- EM: Більш гнучкий, але може стати заплутаним, якщо ви не будете обережні.
- REM: Послідовний розмір, чудово підходить для адаптивного дизайну.
Адаптивний дизайн
Адаптивний дизайн дозволяє вебсайту адаптуватися до розміру екрана пристрою, на якому його переглядають. Таким чином, вебсайт буде виглядати по-різному на різних пристроях.
Читати більшеЩе в розгубленості? Не хвилюйтесь, ми глибше зануримося за мить.
Просто пам’ятайте це наразі: REM зазвичай є безпечнішим вибором для більшості вебсайтів.
Розуміння REM та EM
Добре, давайте трохи заглибимося в деталі.
Як REM, так і EM є відносними одиницями. Це означає, що вони зберігають однаковий розмір відносно певного еталону.
Цей тип розміру відіграє ключову роль у адаптивному дизайні.
Абсолютні розміри (наприклад, px) завжди залишаються незмінними, що означає, що текст може здаватися дуже маленьким на настільному комп’ютері та великим на телефоні. Натомість, відносні одиниці можуть адаптуватися до різних пристроїв та макетів.
У цифровому контексті, REM та EM все ще переважно використовуються для вимірювання тексту. Однак, ви також можете використовувати ці одиниці для:
- Поля
- Внутрішні відступи
- Ширина та висота
- Висота рядка
- Властивості рамки
- Тінь блоку
- Позиціонування
- Медіа-запити
Іншими словами, REM і EM корисні, коли ви хочете гнучке розміщення у вашому дизайні.
Так, це в основному охоплює спільні аспекти цих двох одиниць.
Тепер давайте детальніше розглянемо, що робить кожен з них унікальним.
Початок роботи з REM
REM означає “root em.” Коли ви використовуєте цю одиницю, ви визначаєте, наскільки великим має бути елемент, відносно розміру шрифту кореневого елемента (зазвичай вашого тега <html>).
Більшість браузерів використовують 16px як розмір кореневого елементу за замовчуванням. Однак, рекомендується визначити ваш розмір шрифту за замовчуванням використовуючи CSS.
Ви можете зробити це так:
html { font-size: 16px; /* Ваш базовий розмір шрифту */ }
Який би розмір ви не обрали, він стає 1rem. Це ваша нова базова лінія для всієї сторінки.
Будь-яка цифра, яка більша або менша, змінить розмір вашого цільового елемента відносно обраного вами за замовчуванням.
Це трохи складно пояснити зрозуміло, отже ось простий приклад:
html { font-size: 16px; /* Ваш базовий розмір шрифту */ }
body { font-size: 1.2rem; /* 19.2px */ }
h1 { font-size: 2.4rem; /* 38.4px */ }
У цьому сценарії ми визначили розмір шрифту тега <html> як 16px. Це наш базовий розмір 1rem.
Ми хочемо, щоб наш основний текст був трохи більшим за це. Тому ми встановлюємо розмір шрифту <body> на 1.2rem. Це 120% від базового розміру.
Головний заголовок на нашій сторінці має бути набагато більшим. Встановивши розмір шрифту <h1> на 2.4rem, ми можемо зробити заголовок на 240% більшим від нашого базового розміру.
В результаті ви отримаєте щось подібне:
Чому варто використовувати REM?
Які переваги цієї системи?
У CSS, одиниці REM пропонують деякі досить хороші переваги:
- Справжня узгодженість: Все масштабується пропорційно відносно основного розміру, тому ваш дизайн завжди виглядатиме саме так, як ви планували, на будь-якому пристрої.
- Адаптивність: Пропорційне масштабування означає, що ваш вебсайт або додаток може адаптуватися до широкого спектру пристроїв.
- Легке обслуговування: Коли всі ваші стилі базуються на одному основному налаштуванні, легко вносити глобальні зміни за потреби — вам не потрібно відвідувати кожен окремий елемент та вручну змінювати розмір шрифту. Це також економить вам багато часу.
- Відмінна доступність: Досить багато людей насправді змінюють стандартний розмір шрифту у своїх браузерах, щоб текст було легше читати. Використання розміру REM дозволяє вашому дизайну адаптуватися до цих уподобань користувачів.
Звичайно, не все так просто і райдужно. Є деякі недоліки:
- Сторонні Wildcard: Якщо ваш сайт містить вбудований вміст, можливо, ви помітите, що текст та інші елементи не слідують вашим правилам REM.
- Складні розрахунки: Точне визначення розмірів 1.2rem вимагає деяких математичних розрахунків.
- Велика сила, ще більша відповідальність: Коли ви можете так легко змінювати розмір тексту на всьому вашому вебсайті, потрібно бути обережним з редагуванням, щоб уникнути глобальних дизайнерських катастроф!
Як загальне правило, REM має бути вашим основним вибором для більшості проектів. Це легше в обігу, ніж розмір EM, і результати більш передбачувані.
Проте, є моменти, коли EM є корисним.
Дізнатися більше про EM
EM — хитрий клієнт. Цей блок базується на розмірі шрифту свого батьківського елемента — наче хамелеон, що адаптується до свого оточення.
Плутанина починається, коли ви починаєте вкладення. Більшість елементів успадковують свій типовий розмір шрифту від свого батька. Але що, якщо батько також використовує розмір EM? Ви легко можете опинитися в заплутаному безладі пропорційності.
Ось простий приклад:
Припустимо, у вас є сторінка, яка містить <div>. Усередині цього блоку ми маємо <p> тег, що містить деякий текст.
<html>
<div>
<p>Деякий текст тут.</p>
<div>
</html>
Тепер розглянемо CSS для цього HTML фрагмента:
html { font-size: 16px; /* Початковий розмір за замовчуванням */ }
div { font-size: 1.2em; /* 19.2px */ }
p { font-size: 1.2em; /* 23.04px */ }
Ми почали з визначення стандартного розміру шрифту для всієї сторінки. Поки що все добре.
Далі ми сказали, що вміст <div> повинен бути 1.2em. Іншими словами, наш текст повинен становити 120% від типового розміру батьківського елемента.
Для завершення, ми також змінюємо <p> розмір шрифту 1.2em.
Зачекайте хвилинку! Відбулося значне збільшення розміру тексту, яке вимірюється в пікселях.
Чому це так?
Елемент <p> подивився на розмір шрифту свого батька <div> (19.2px) і взяв його за замовчуванням. Та оскільки ми запросили 1.2em, ми отримуємо текст, який становить 120% від замовчуваного розміру.
Ці помилки легко зробити, коли ви працюєте з одиницею EM.
EM чудово підходить для точного розмірів
Окрім недоліків, одиниця EM може бути дійсно корисною для розмірів специфічних компонентів.
Припустимо, ви хочете створити кнопку, яка завжди займає приблизно однакову площу всередині батьківського елемента.
Ваш HTML код може бути:
<button class='button'>Клікніть мене</button>
Щоб стилізувати вашу кнопку, ви можете використовувати одиниці EM для font-size та padding.
CSS могло б виглядати приблизно так:
.button {
font-size: 1em; /* Розмір відносно розміру тексту батька */
padding: 0.5em 1em; /* Відступ масштабується з розміром шрифту */
}
Код вище створює просту кнопку з невеликою відстанню навколо тексту.
Якщо розмір шрифту батьківського елементу збільшується, то розмір шрифту та відступи кнопки також зміняться відповідно.
Таким чином, ви зможете зберегти той самий візуальний баланс між елементами всередині батьківського об’єкта, навіть якщо ви зміните пристрої або рівень збільшення.
Чому варто використовувати EM?
З урахуванням усієї плутанини, навіщо взагалі використовувати EM?
Ну, воно дійсно має деякі переваги:
- Контекстне масштабування: Елементи масштабуються залежно від розміру батьківського елемента, що надає вам більше тонкого контролю над розмірами у вашому дизайні.
- Дизайн на основі компонентів: Одиниці EM чудово підходять для створення самостійних, повторно використовуваних компонентів, які зберігають ті самі пропорції.
- Точний контроль: Ви можете точно налаштовувати розміри на кожному рівні структури документа, не вдаючись до глобальних змін.
- Адаптивність: Подібно до одиниць REM, одиниці EM дозволяють вашому дизайну адаптуватися до різних розмірів екранів та уподобань користувачів.
Як ми бачили, є також деякі недоліки:
- Накопичувальні ефекти: Вкладені елементи можуть привести до неочікуваних розмірів, оскільки значення EM починають накопичуватися.
- Проблеми з обслуговуванням: Зміна розміру шрифту батьківського елементу впливає на всі дочірні елементи, що може призвести до небажаних наслідків — наприклад, великий текст основного змісту та маленькі заголовки.
- Складність у великих проектах: З ростом вашого проекту відстеження всіх відносних розмірів може стати складним.
Підсумовуючи, EM може бути надзвичайно корисним для дизайнів на основі компонентів та коли вам потрібен точний контроль над взаємозв’язками елементів. Він більш гнучкий, ніж розмірність на основі пікселів, але вимагає більш ретельного планування, ніж REM.
REM чи EM: Що вам слід використовувати?
Ну, це було багато цікавої інформації. Однак, якщо ви будуєте щось, вам просто потрібно знати, яку одиницю CSS використовувати.
Ось наш вердикт:
- REM є кращим вибором для більшості проектів, оскільки він більш масштабований та забезпечує кращий контроль.
- EM може бути корисним інструментом для конкретних сценаріїв, які включають вкладені стилі.
Також варто зазначити, що як REM, так і EM зазвичай кращі для сучасного дизайну, ніж абсолютні одиниці, такі як px.
Вони також більш практичні для визначення розміру тексту порівняно з іншими відносними одиницями, такими як одиниці виду (vh/vw) та відсотки (%).
Давайте розглянемо REM проти EM з висоти пташиного польоту:
| Особливості | REM | EM |
| Спадкування | Узгоджено з кореневим елементом | Відносно батьківського елемента |
| Масштабованість | Відмінна | Обмеженіша |
| Складність | Нижча, завдяки узгодженості | Вища, через контекстне масштабування |
| Обслуговування | Легке — зміни в розмірі кореня розповсюджуються | Може бути складніше з вкладеними елементами |
| Доступність | Ефективно працює з уподобаннями користувача | Може потребувати коригувань |
| Найкраще для | Глобального простору та макету | Масштабування специфічних компонентів |
REM та EM: Часті питання про розмір шрифту
Цей посібник має розвіяти більшість непорозумінь, пов’язаних з цими дуже схожими одиницями.
Але якщо у вас все ще залишилися питання, ось що вам потрібно знати!
Чи слід використовувати REM чи EM для адаптивного дизайну?
REM зазвичай є кращим вибором для адаптивних дизайнів, оскільки він дозволяє створювати послідовні та масштабовані компонування, які адаптуються до різних розмірів екранів.
Єдиний виняток – коли ви хочете створити окремі одиниці, де всі елементи зберігають однакове співвідношення розмірів.
Як уникнути складностей під час використання одиниць EM?
Щоб уникнути складностей з одиницями EM, намагайтеся обмежити вкладення елементів. Використовуйте REM для глобального розміру та EM для невеликих коригувань у конкретних компонентах.
Чи є рекомендований базовий розмір шрифту для REM?
Хоча строгих правил немає, зазвичай базовий розмір шрифту для REM становить 16px. Однак ви можете вибрати будь-яке значення, яке відповідає вашим дизайнерським уподобанням та вимогам до доступності.
Зануртесь глибше у CSS
Хочете дізнатися більше про цифровий дизайн? У нас є багато чудових ресурсів для вивчення CSS:
- Знайомство з властивістю CSS Transform
- Tailwind проти Bootstrap: Який CSS фреймворк вам потрібен?
- Ваш повний посібник по Tailwind CSS
- 16 популярних CSS фреймворків, які допоможуть вам заощадити час (із стилем)
- CSS анімації: покращте ваш сайт за допомогою цих 17 варіантів
Адаптивний дизайн має значення
Одиниця CSS є компонентом, який часто ігнорується, як ми згадували на початку цього посібника.
Однак, якщо ви хочете створити вебсайт або додаток, який виглядатиме добре на кожному пристрої та буде зручним для кожного користувача, важливо подумати про деталі дизайну.
Дискусія між REM чи EM насправді не має великого значення в кінцевому підсумку — Найважливіше, щоб ваш сайт був доступний, адаптивний та зручний у використанні!
Просто пам’ятайте, що гарний інтерфейс нічого не значить, якщо ваш сайт або додаток не завантажуються. Якщо ви хочете забезпечити своїм користувачам найкращий досвід, розгляньте можливість оновлення вашого хостингу з DreamHost.
Ми пропонуємо гарантію безперервної роботи 100% на всі наші Shared Hosting плани, з оптимізованими серверами та відмінними функціями безпеки. Зареєструйтесь сьогодні щоб побачити різницю на власні очі!
Найпотужніший хостинг від DreamHost
Наші плани виділеного хостингу є ідеальним рішенням для сайтів з великою кількістю трафіку, які потребують високої швидкості та постійної доступності.
Дивитись плани