Основи роботи з адаптивним текстом

10 січня 2017 12:20 OlegWock 2539 3

Не секрет, що для того щоб текст прочитало якнайбільше людей, він теж повинен бути адаптивним. Його розмір повинен залежати від розміру екрану. Зазвичай для цього задають розміри в rem. І тоді вже браузер вирішує якого розміру текст потрібно відобразити.

Зазвичай, текст в першу чергу бачать, і лише потім читають. Інакше кажучи, текст стає своєрідною картинкою. А зображення, як і інші елементи, в вебі вже давно звикли адаптувати до розміру екрану.

Впровадження нових одиниць вимірювання

В CSS3 було додано декілька нових одиниць розміру (тобто ви можете використовувати їх там же де і px, ems чи відсотки), які залежать від розміру вікна перегляду (viewport). Взагалі їх чотири, одиниця рівнозначна 1% від ширини чи висоти екрану, залежно від конкретної одиниці вимірювання.

  • vm — ширина viewport.

  • vh — висота viewport.

  • vmin — висота або ширина, в залежності, що менше.

  • vmax — висота або ширина, в залежності, що більше.

Тепер ви можете за раз встановити розмір для тексту, без використання черги медіа-запитів. Наступний код робить заголовки розміром з 13% від ширини екрану:

h1 {
    font-size: 13 vw;
}

Після рендерингу абсолютний розмір буде таким:

| Viewport | 13vw |
|----------|------|
| 320      | 42   |
| 768      | 100  |
| 1024     | 133  |
| 1280     | 166  |
| 1920     | 250  |

Але з'являється нова проблема. Текст в альбомній орієнтації екрану пристрою занадто великий в порівнянні з тим же текстом, але при портретній орієнтації.

Це виникає через те, що кожна орієнтація екрану має власні розміри viewport, а в підсумку страждає наш дизайн.

Коли ж розмір тексту не залежить від орієнтації екрану, це виглядає приємніше. Ось тут і з'являється vmin. Якщо ви встановите розмір в vmin, він буде пропорційний меншій стороні вікна перегляду.

h1 {
    font-size: 13vmin;
}

Якщо порівнювати кінцевий розмір тексту з використанням vw та vmin, ви побачите, як vmin плавно його збільшує, на відміну від vw.

| Viewport    | 13vw | 13vmin |
|-------------|------|--------|
| 320 × 480   | 42   | 42     |
| 414 × 736   | 54   | 54     |
| 768 × 1024  | 100  | 100    |
| 1024 × 768  | 133  | 100    |
| 1280 × 720  | 166  | 94     |
| 1366 × 768  | 178  | 100    |
| 1440 × 900  | 187  | 117    |
| 1680 × 1050 | 218  | 137    |
| 1920 × 1080 | 250  | 140    |
| 2560 × 1440 | 333  | 187    |

Гібридний алгоритм встановлення розміру

Використання нових одиниць розміру для встановлення залежності розміру тексту від розміру екрану виглядає чудово. Але при появі різних підзаголовків, які не можна масштабувати з цією ж швидкістю, починаються проблеми. Наприклад, в вас є підзаголовок, розміри якого починаються з 16px на маленьких екранах, і заголовок який масштабується так само:

h1 {
    font-size: 13vmin;
}
h2 {
    font-size: 5vmin;
}

На телефонах це працює прекрасно, але на екранах побільше він здається непропорційно великим, хоча й масштабувався за тими ж правилами, що й на телефонах. І чим більший екран, тим ця проблема стає виднішою.

Рішенням цієї проблеми може бути гібридний алгоритм. Ми можемо використати функцію calc() щоб вирахувати розмір тексту опираючись і на rem і на vmin.

h2 {
    font-size: calc(0.5rem + 2.5vmin);
}

Для екрану шириною 320px, розмір шрифту буде 16px:

(0.5 × 16) + (320 × 0.025) = 8 + 8 = 16px

А на екрані шириною 768px він буде 27px:

(0.5 × 16) + (768 × 0.025) = 8 + 19 = 27px

В підсумку ми маємо більш збалансований алгоритм масштабування тексту.

Щоб краще зрозуміти різницю між двома алгоритмами, ось таблиця що показує розмір тексту на різних екранах:

Джерело перекладу

2539 6

Схожі матеріали:

Коментарі:

Сергей Храпин

11 Січ 2017 00:14

Щось зображення з першого разу не відкрились, а у вас alt'и не стоять, ай-яй-яй!!

OlegWock

11 Січ 2017 18:32

тсссссс

Mykhailo Koltsov

23 Січ 2017 16:30

vm — ширина viewport.
Так vm чи vw?

Авторизуйтесь, щоб залишити коментар.