PricingLoginStart free
CSS Academy · Урок

Функции min, max и clamp

Используйте min(), max() и clamp() для адаптивных размеров, реагирующих на размер контейнера или области просмотра.

Урок 4 из 413 шагов

«Функции min, max и clamp» — бесплатный урок CSS Academy на CoddyKit. Это урок 4 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения CSS Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс CSS Academy содержит 4 уроков всего.

Зачем нужны функции сравнения CSS

Функции сравнения CSS позволяют задавать условный размер без JavaScript: «использовать этот размер, но не меньше или не больше указанных границ». Это основа современного гибкого адаптивного дизайна.

Функция min()

min() возвращает наименьшее значение из списка значений, разделённых запятыми. Браузер выбирает наименьшее значение для текущего размера области просмотра.

<div class="container">Container width: min(800px, 90%)</div>

Функция max()

max() возвращает наибольшее значение. Это удобно для задания минимальных размеров, которые могут увеличиваться.

<p>Text sized with max(1rem, 2vw)</p>

Функция clamp()

clamp(min, preferred, max) ограничивает значение диапазоном от минимального до максимального. Предпочтительное значение обычно является гибким, например vw.

<h1>Clamped Heading</h1>

clamp() для плавной типографики

Плавная типографика с помощью clamp() устраняет необходимость в нескольких переопределениях размера шрифта через медиазапросы:

<h1>Main Heading</h1>
  <h2>Subheading</h2>
  <p>Body copy that scales fluidly with the viewport.</p>

clamp() для плавных интервалов

Примените тот же подход к интервалам, чтобы внешние и внутренние отступы естественным образом адаптировались:

<div class="section">Section with fluid padding</div>

min() для контейнеров

Безопасный шаблон контейнера, который никогда не превышает максимальную ширину и не добавляет горизонтальную прокрутку:

<div class="wrapper">Safe wrapper container</div>

Вложенные функции

Функции сравнения можно вкладывать друг в друга для создания сложных выражений:

<p class="hero-text">Nested min/max inside clamp()</p>

Сочетание calc() и clamp()

Используйте calc() внутри clamp() для точной плавной интерполяции между двумя размерами:

<h1>Precise fluid heading</h1>

min-content, max-content и fit-content

В CSS также есть ключевые значения размера:

  • min-content: наименьший возможный размер без переполнения
  • max-content: занимает столько места, сколько требуется содержимому
  • fit-content(): подобен max-content, но ограничен заданным пределом
<span class="tag">Tag label</span>

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

min(), max() и clamp() поддерживаются всеми современными браузерами. Префиксы не нужны. Их можно использовать везде, где ожидается значение длины, частоты, времени или числа.

Быстрая проверка

Для заголовка задано font-size: clamp(1rem, 4vw, 3rem) в области просмотра шириной 600px. Каков размер шрифта?

Ответь в интерактивном уроке

Итоги

min() выбирает наименьшее значение, а max() — наибольшее. clamp(min, preferred, max) ограничивает плавно изменяющееся значение заданными пределами. Эти функции лежат в основе современной плавной типографики и интервалов, часто устраняя необходимость в нескольких переопределениях через медиазапросы.

Можно начать бесплатно

Изучай CSS с ИИ-репетитором — бесплатно

Пиши и запускай код прямо в браузере, получай мгновенную помощь от ИИ-репетитора 24/7 и продолжи учиться на сайте или в приложении.

Курсы
40
Уроки
159
Начать учиться бесплатноПосмотреть полный курс

Часто задаваемые вопросы

Урок «Функции 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 структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 4 из 4.

Сколько времени занимает урок «Функции min, max и clamp»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке CSS Academy?

Да. Каждый урок CSS Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

  1. Абсолютные единицы: px, pt, cm
  2. Относительные единицы: em и rem
  3. Единицы области просмотра: vw, vh, dvh
  4. Функции min, max и clamp
← Назад к CSS Academy