Для зміни розміру тексту веб-сторінки спільно з вікном браузера є кілька способів. Розглянемо найпопулярніші.
Використання одиниць vw
Розмір тексту задається за допомогою властивості font-size, як значення можна вказувати різні одиниці — пікселі, пункти, міліметри та ін. Одиниця vw (від англ. приклад 1).
Приклад 1. Використання vw
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Розмір тексту</title> <style> section h2 { font-size: 3vw; /* Розмір заголовка */
}
section div { font-size: 2vw; /* Розмір тексту */
}
</style>
</head>
<body> <section> <h2>Для педагогів</h2> <div> Сучасна освітня парадигма, ратифікуючи пріоритет особистісної орієнтації педагогічного процесу, під час якого здійснюється розвиток природних задатків, закладених у кожному індивідуумі, потребує переосмислення існуючих традиційних форм та методів загальнообов'язкової освіти.
</div>
</section>
</body>
</html>Результат цього прикладу показаний на рис. 1.
а
б Рис. 1. а — текст на широкому вікні; б — текст на вузькому вікні
У одиниці vw є кілька недоліків — головне, що текст зменшується пропорційно до вікна і в якийсь момент стає нечитаним. Це буде особливо помітно на смартфонах, де ширина екрана менша за ширину моніторів. Щоб встановити мінімальний розмір тексту, можна скористатися функцією calc(), як показано в прикладі 2.
Приклад 2 Використання calc()
section h2 { font-size: calc(1rem + 2vw); }
section div { font-size: calc(14px + 1vw); }Тут ми змішуємо різні одиниці — для заголовка rem та vw, для основного тексту пікселі та vw. Використання calc() гарантує, що текст не стане меншим від зазначеного значення (для заголовка, наприклад, це 1rem).
Використання медіа-запитів
Оскільки одиниці vw зав'язані на ширину області перегляду, то при збільшенні розміру вікна збільшується розмір тексту. Іноді потрібно зробити навпаки — на маленьких екранах показувати великий текст, а на великих екранах, відповідно, маленький текст. Для цього застосовуються медіа-запити, вони змінюють стиль елементів за певної ширини вікна браузера.
Спершу визначаємо стиль для великих екранів, потім за допомогою конструкції @media screen and (max-width: 1024px) задаємо стиль для екранів з шириною до 1024 пікселів . Всередині @media пишеться розмір тексту для цього розміру. За бажанням нижче додаємо ще кілька @media з різними значеннями max-width (приклад 3).
Приклад 3. Використання @media
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Розмір тексту</title> <style> /* Для всіх екранів */
section h2 { font-size: 2rem; }
section div { font-size: 1rem; }
/* Для ширини 1024 пікселів і менше */
@media screen and (max-width: 1024px) { section h2 { font-size: 2.2rem; }
section div { font-size: 1.2rem; }
}
/* Для ширини 600 пікселів і менше */
@media screen and (max-width: 600px) { section h2 { font-size: 2.5rem; }
section div { font-size: 1.5rem; }
}
</style>
</head>
<body> <section> <h2>Для педагогів</h2> <div> Сучасна освітня парадигма, ратифікуючи пріоритет особистісної орієнтації педагогічного процесу, під час якого здійснюється розвиток природних задатків, закладених у кожному індивідуумі, потребує переосмислення існуючих традиційних форм та методів загальнообов'язкової освіти.
</div>
</section>
</body>
</html>Розмір тексту в даному випадку буде змінюватися не плавно, а ступінчасто — при досягненні вказаної ширини вікна розмір тексту зменшується або збільшується.