Дизайн реактивний сайт з розміром на основі EM

Sep 13, 2025

Як

Ви, напевно, чули, що ви повинні використовувати відносні одиниці розміру шрифту. Це хороше правило для доступного веб-дизайну; Якщо користувач змінює розмір шрифту за замовчуванням браузера, це дає текст вашої сторінки відповідно змінювати розмір. Ви, можливо, зробили цю пораду та зробили перемикач. Можливо, ви вийшли свій калькулятор і перетворив розмір шрифту вашого сайту від абсолютного пухлина одиниці до EMS або, швидше за все, REMS.

Але якщо це те, де ви зупинилися, вам не вистачає великої гнучкості та сили, що EMS приносять до браузера. Одиниця EM - це не просто заміна знайомого пухлина ; Ви можете використовувати його для отримання додаткових властивостей, ніж просто розмір шрифту . Якщо ви робите, деякі з інших переваг починають з'являтися.

Послідовно використовуючи EMS, ви можете розробляти компоненти на сторінці, яка реагує автоматично, якщо змінити розмір шрифту. Потім, з розумним трюком для чужого розміру шрифту, ви можете створити цілу сторінку, яка налаштовується динамічно заснована на ширині перегляду браузера. Дозвольте мені показати, як використовувати "відносну" поведінку ЕМС для створення конструкцій, які є масштабованими та чуйними.

Розмір шрифту

Використання EMS для розміру шрифту може бути складним. Точне значення визначається успадкованим розміром шрифту елемента (тобто розмір шрифту батьківського елемента). Це ускладнюється, коли ви починаєте гніздити елементи більш глибоко. Якщо елемент має розмір шрифту в EMS, його батько має розмір шрифту в EMS, і його батько ще один. Вам доведеться помножити всі ці значення, щоб визначити фактичну обчислену величину дитячого елемента.

Це означає, що розміщення того ж модуля в різних контейнерах може змінити значення EM. Модуль буде непередбачуваним.

Щоб уникнути цього, ми зазвичай використовуємо інший відносний блок для розміру шрифту: REMS. Rem (або 'root em') заснований не на успадкованому розмірі шрифту, але на розмір шрифту кореневого елемента сторінки, & lt; html & gt; . Це означає, що його значення однакова по всій сторінці. Це більш передбачуване, ніж, і часто краще, звичайні EMS.

Створення модуля з EMS

Давайте використовувати відносні одиниці, щоб побудувати модуль. Однак, ми не будемо дотримуватися загального підходу. Замість того, щоб використовувати REM за все, ми будемо використовувати його лише один раз: на верхній частині елемента модуля. Це встановить відомий розмір шрифту для модуля, а не, ніж він заснований на непередбачуваному ланцюжку цін, над ним у Домі. Це означає, що ми можемо легко масштабувати розмір модуля, перекривши одне значення.

Use rems on the outermost element to establish a known font size, then use ems to build based on that value — Використовуйте REMS на зовнішній елемент, щоб встановити відомий розмір шрифту, а потім використовувати EMS для побудови на основі цього значення

Після того, як ми встановимо цей відомий розмір шрифту, ми безпечно використовувати регулярний EMS протягом усього модуля. Використовуйте його не тільки для будь-яких розмірів шрифту на під-елементах, але також для більшості інших властивостей, у тому числі підкладка , маржа і прикордонний радіус .

Ми побудуємо панель з заголовком і тілом. Позначення виглядає так:

 & lt; div class = "панель" & gt;
  & lt; div class = "панельний заголовок" & gt;
    & lt; h3 & gt; ось потужність ems & lt; / h3 & gt;
  & lt; / div & gt;
  & lt; div class = "панель-тіло" & gt;
    Розглянемо способи, якими ви можете використовувати відносну
    Одиниці для динамічного розміру ваших модулів.
  & lt; / div & gt;
& lt; / div & gt;

Давайте стиль зовнішнього контейнера. Ми встановимо розмір шрифту 1REM встановити нашу місцеву цінність. Потім ми визначимо прикордонний радіус використання EMS. Я, як правило, хотів би використовувати PX для кордону, хоча, щоб отримати хорошу тонку лінію.

 .panel {
  Шрифт-розмір: 1Rem;
  кордон: 1px твердий # 678;
  Прикордонний радіус: 0.3EM;
  переповнення: приховані;
}

Далі, стиль внутрішніх елементів. Ми будемо використовувати EMS для підкладки. Тоді ми збільшимо розмір шрифту заголовка до 1,25 рази нашої локальної вартості EM, створюючи обчислений розмір 20px.

 .panel-heading {
  Подушка: 0.6em 1.2em;
  Колір фону: #CDE;
  кордон-дна: 1px твердий # 678;
}
.panel-heading & gt; h3 {
  Шрифт-розмір: 1.25em;
  маржа: 0;
  letter-spacing: 0.03EM;
}
.panel-тіло {
  Подушка: 0.6em 1.2em;
}

Ви можете помножити значення підкладки за допомогою свого розміру шрифту, щоб визначити їх обчислені значення (Vertical Vertical та 19.2px). Правдиво, хоча це не має значення. Намагайтеся не занурюватися з Pixel-ідеальними вимірами. Це може відчувати себе незручно, але натисніть на. Чим більше ви використовуєте EMS, тим більше ви будете знайомі з ними як одиницю у власній повазі.

Динамічно масштабування дизайну

Коли ми створюємо багаторазові модулі, як це, ми часто знаходимо, нам потрібно кілька варіантів. Скажімо, ми хотіли створити більшу версію. Якщо ми використовували PX для всього, це означатиме збільшення розміру шрифту, підкладки, прикордонного радіуса тощо. Однак, оскільки ми визначили все по відношенню до одного розміру шрифту REM, нам потрібно лише змінити це значення, і весь модуль відповість:

 .panel - великий {шрифт-розмір: 1.2rem; }

Ми просто додаємо цей клас до панелі, щоб зробити його більшим: & lt; div class = "панель панелі - великі" & gt; . Це змінить місцеве визначення ЕМ, і, таким чином, змінюються радіусом кордону та зміна поповнення, а також розмір шрифту своїх дитячих елементів. За допомогою однієї декларації ми змінили кожну частину модуля.

A panel module, with paddings and border radius defined using ems — Панельний модуль, з прокладками та радіусом кордону, визначений за допомогою EMS

Аналогічно, ми могли б створити невелику версію:

 .panel - малий {шрифт-розмір: 0.8rem; }

За рахунок заземлення модуля за допомогою розміру шрифту верхнього рівня в REMS, ми зробили це стабільним та передбачуваним. Визначивши все інше у використанні EMS, ми зробили всі його складові частини масштабованими.

It is possible to base the size of everything inside the module on one value, then change that value to scale it all — Можна встановити розмір усього всередині модуля за одним значенням, а потім змініть це значення для масштабування все це

Це потужний шаблон. Ви можете використовувати цей підхід для будь-якого на вашій сторінці, зі спадних меню до кнопок соціальних мереж. Ground Модуль з значенням rem, потім використовуйте em для практично всього іншого з прокладки до розміщення значків.

Що робить його чутливою

Давайте підштовхнемо принцип одного рівня. Ми розмірили модуль (і теоретично всі інші модулі на сторінці), використовуючи REMS та EMS. Це, в кінцевому підсумку, означає, що їх розмір заснований на розмірі шрифту кореневого елемента. Потім ми можемо налаштувати це одне значення, щоб зробити всю сторінку по черзі.

Давайте приведемо іншу відносну одиницю: до . Комп'ютерне значення цього пристрою походить від розміру екрана користувача; Це дорівнює 1 відсотках ширини перегляду. Якщо ми використовуємо одиницю VH, щоб визначити розмір шрифту кореневого шрифту, він автоматично буде відповідати, Sans Media Queries. Встановіть розмір шрифту на кореню 2вв :

 HTML {
  Шрифт-розмір: 2вв;
}

На жаль, ефект трохи занадто сильний. Наприклад, на iPhone 6 буде обчислювати 55px, що занадто малий. Аналогічно, це необґрунтовано великі на більших екранах. Щоб пом'якшити ефект, ми можемо використовувати CSS Calc () Функція:

 HTML {
  Розмір шрифту: Calc (0.6em + 1VW);
}

Зараз розмір шрифту частково виводиться з стабільної вартості, а частково від чуйного. Це виробляє набагато кращий ефект. Точний 0.6em поводиться як свого роду мінімальний розмір шрифту. Тепер корінь Em буде масштабно жидливо від приблизно 13px на смартфоні до 21px на середньому настільному екрані.

З вашою сторінкою складається з масштабованих модулів, кожен заснований до значення REM, і вони теж будуть масштабними з Viewport. Сторінка структурована з трирівневою ієрархією; Ви можете змінити розмір всієї сторінки, індивідуального модуля або одного елемента, зробивши просте редагування розміру шрифту. Довіряйте EMS і REMS, і браузер буде піклуватися про роботу для вас.

Вам все ще потрібно додати випадкові медіа-запит для керування випапленням лінії та деяких інших чутливих проблем. Але цей невеликий біт коду поєднується з звичкою використання EMS і REMS, отримає вам багато шляху.

Ця стаття була спочатку представлена чистий журнал випуск 288; купити його тут

Пов'язані статті:

10 типографічних трюків кожен дизайнер повинен знати
Керівництво дизайнера до типографії та шрифтів
Майстер доступна веб-типографія

Дизайн реактивний сайт з розміром на основі EM

Розмір шрифту

Створення модуля з EMS

Динамічно масштабування дизайну

Що робить його чутливою

Як - Найпопулярніші статті

5 Поради для Super-Fast CSS

Підготуйте дошку для фарбування в 3 простих кроках

Як створити лаву лаву з Keyshot

Як створити пухнасті мультфільм

Як зробити смачні текстури з олівцями

Як створити проксі RedShift у кіно 4D

наречений непереборно пухнастий істота

Початок роботи з прототипом у Adobe XD

Категорії