CSS адаптивный текст

CSS - Адаптивный текст

Селектор:

body; h1; h2; h3; p; .text; #header

Свойство:

font-size; line-height; font-weight; text-align; word-wrap; overflow-wrap;

Значения:

px; %; em; rem; vw; vh; auto; normal; break-word;

Адаптивный текст в CSS – это подход к оформлению текстового контента, который обеспечивает оптимальное отображение текста на различных устройствах и экранах. Данная технология является важной составляющей отзывчивого веб-дизайна.

Основные единицы измерения

Относительные единицы

• em – относительная единица, зависящая от размера шрифта родительского элемента
• rem – относительная единица, зависящая от размера шрифта корневого элемента (root em)
• vw – единица, равная 1% от ширины viewport
• vh – единица, равная 1% от высоты viewport
• vmin – наименьшее значение из vw и vh
• vmax – наибольшее значение из vw и vh

Абсолютные единицы

• px – пиксели
• pt – пункты
• pc – пики

Свойства

• font-size — размер шрифта.
• line-height — высота строки.
• font-weight — насыщенность шрифта.
• text-align — выравнивание текста.
• word-wrap и overflow-wrap — управление переносом слов.

Адаптивные техники

Fluid Typography

Fluid Typography позволяет плавно масштабировать текст в зависимости от размера экрана:

.fluid-text {
    font-size: clamp(1rem, 0.5rem + 2vw, 2rem);
}

Медиа-запросы

Медиа-запросы позволяют задавать различные стили для разных размеров экрана:

@media screen and (max-width: 768px) {
    body {
        font-size: 16px;
    }
}

@media screen and (min-width: 769px) {
    body {
        font-size: 18px;
    }
}

Функция calc()

Функция calc() позволяет комбинировать различные единицы измерения:

.adaptive-heading {
    font-size: calc(16px + 2vw);
    line-height: calc(1.1em + 0.5vw);
}

Современные CSS-функции

clamp()

Функция clamp() задаёт минимальное, предпочтительное и максимальное значения:

.heading {
    font-size: clamp(1.5rem, 5vw, 3rem);
}

min() и max()

Функции min() и max() помогают устанавливать динамические ограничения:

.paragraph {
    width: min(65ch, 100%);
    font-size: max(1rem, 2vw);
}

Примеры использования

Адаптивный заголовок

h1 {
    font-size: clamp(2rem, 5vw + 1rem, 4rem);
    line-height: 1.2;
    margin-bottom: calc(1rem + 2vw);
}

Читабельный параграф

p {
    font-size: clamp(1rem, 1rem + 0.5vw, 1.25rem);
    line-height: 1.6;
    max-width: 65ch;
    margin: 0 auto;
}

Результат применения читабельного текста:

Потестировать код на отдельной странице

Практические советы

• Используйте относительные единицы измерения вместо абсолютных
• Комбинируйте различные техники для достижения оптимального результата
• Тестируйте вёрстку на различных устройствах
• Учитывайте удобочитаемость текста
• Определяйте минимальные и максимальные значения для предотвращения экстремальных размеров

Поддержка браузерами

Функция	Chrome	Firefox	Safari	Edge
clamp()	79+	75+	13.1+	79+
calc()	19+	4+	6+	12+
vw/vh	20+	19+	6+	12+

См. также

• CSS
• Адаптивный дизайн
• Типографика в веб-дизайне

Внешние ссылки

• MDN Web Docs: CSS
• W3C CSS Working Group