Как менять размер текста при изменении размера окна?
Для изменения размера текста веб-страницы совместно с окном браузера есть несколько методов. Рассмотрим наиболее популярные.
Использование единиц vw
Размер текста задаётся с помощью свойства font-size, в качестве значения можно указывать разные единицы — пиксели, пункты, миллиметры и др. Единица vw (от англ. viewport width — ширина области просмотра) соответствует 1% от ширины окна браузера, таким образом, при изменении этой ширины будет меняться и размер текста (пример 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>
Размер текста в данном случае будет меняться не плавно, а ступенчато — при достижении указанной ширины окна размер текста уменьшается или увеличивается.
Автор: Влад Мержевич
Источник: webref.ru