Не секрет, що для того щоб текст прочитало якнайбільше людей, він теж повинен бути адаптивним. Його розмір повинен залежати від розміру екрану. Зазвичай для цього задають розміри в 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
В підсумку ми маємо більш збалансований алгоритм масштабування тексту.
Щоб краще зрозуміти різницю між двома алгоритмами, ось таблиця що показує розмір тексту на різних екранах:
Ще немає коментарів