min(), max() и clamp() для плавных значений
Ограничивайте значения минимумом и максимумом с помощью min(), max() и сокращённой записи clamp().
«min(), max() и clamp() для плавных значений» — бесплатный урок CSS Academy на CoddyKit. Это урок 2 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения CSS Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс CSS Academy содержит 4 уроков всего.
Зачем нужны функции сравнения?
Функции сравнения CSS (min(), max(), clamp()) позволяют создавать адаптивные размеры, которые подстраиваются под контекст без медиазапросов, — это элегантнее и короче, чем подходы на основе контрольных точек.
min() — выбор наименьшего
min(a, b, ...) вычисляет все аргументы и использует наименьшее значение. Здесь «минимум» означает визуальный результат, то есть наиболее ограниченный вариант.
<div class="container">Container</div>max() — выбор наибольшего
max(a, b, ...) выбирает наибольшее значение, гарантируя соблюдение минимального предела.
<p>Responsive text</p>clamp(min, preferred, max)
clamp() ограничивает значение заданным диапазоном. Предпочтительное значение (средний аргумент) обычно является гибким. Минимальное и максимальное значения задают абсолютные границы.
<h1>Clamped Heading</h1>Гибкая типографическая шкала с clamp()
Заменяйте несколько переопределений для контрольных точек одним вызовом clamp() для каждого уровня заголовка:
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>Гибкие интервалы с clamp()
Применяйте гибкие размеры также к padding, margin и gap — это важный приём для дизайна на основе содержимого:
<div class="section">
<div class="grid"><div>A</div><div>B</div></div>
</div>min() как ограничитель ширины
Самый простой шаблон контейнера: всегда 90% области просмотра, но не шире 1200px, — всё задаётся одним выражением:
<div class="wrapper">Wrapper</div>max() для минимального размера шрифта
Гарантируйте, что основной текст не станет слишком мелким на небольших областях просмотра:
<p class="text-body">Body text that never gets too small.</p>Вложение min/max/clamp
Эти функции можно вкладывать друг в друга для задания сложных ограничений:
<div class="element">Padded element</div>Функции сравнения в Grid
Используйте min() внутри minmax() для более надёжного минимального размера столбца:
<div class="grid"><div>Card</div></div>Поддержка браузерами
Все три функции сравнения полностью поддерживаются современными браузерами (Chrome 79+, Firefox 75+, Safari 11.1+). Префиксы производителей не нужны.
Быстрая проверка
Для заголовка задано font-size: clamp(1rem, 3vw, 2.5rem). При какой ширине области просмотра 3vw равно 1rem (если корневой размер равен 16px)?
Итоги
min() выбирает меньшее значение (верхний предел). max() выбирает большее (нижний предел). clamp(min, preferred, max) ограничивает гибкое значение. Вместе эти функции обеспечивают гибкую типографику и интервалы без медиазапросов. Самый мощный шаблон — clamp(1.5rem, 4vw, 3rem) для автоматически адаптивных заголовков.
Часто задаваемые вопросы
Урок «min(), max() и clamp() для плавных значений» бесплатный?
Да — полный текст урока «min(), max() и clamp() для плавных значений» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс CSS Academy, подпишись на CoddyKit PRO. Курс CSS Academy содержит 4 уроков всего.
Чему я научусь в уроке «min(), max() и clamp() для плавных значений»?
Ограничивайте значения минимумом и максимумом с помощью min(), max() и сокращённой записи clamp(). Ты практикуешь CSS Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать CSS Academy?
Предыдущий опыт не требуется. CSS Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 2 из 4.
Сколько времени занимает урок «min(), max() и clamp() для плавных значений»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке CSS Academy?
Да. Каждый урок CSS Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- calc() для динамических вычислений
- min(), max() и clamp() для плавных значений
- repeat() и minmax() в Grid
- color-mix() и относительный синтаксис цвета