Современные функции в CSS
Современные CSS-функции min(), max() и clamp() позволяют создавать гибкие, адаптивные размеры без медиа-запросов.
1. min() — минимальное значение
Выбирает наименьшее значение из перечисленных. Удобно для ограничения максимального размера.
.element {
width: min(100%, 500px);
}
width: min(100%, 300px)
(ширина не больше 300px, но на телефоне меньше)
(ширина не больше 300px, но на телефоне меньше)
✅ Попробуйте изменить ширину окна — блок не станет шире 300px, но на узких экранах подстроится
2. max() — максимальное значение
Выбирает наибольшее значение из перечисленных. Удобно для задания минимального размера.
.element {
width: max(200px, 50%);
}
width: max(200px, 50%)
(ширина не меньше 200px)
(ширина не меньше 200px)
✅ На узких экранах блок не станет уже 200px
3. clamp() — диапазон значений
Задаёт значение, которое не выходит за пределы диапазона: clamp(минимум, предпочтительное, максимум).
Идеально для адаптивных шрифтов: они растут с экраном, но не становятся слишком большими или маленькими.
h1 {
font-size: clamp(24px, 5vw, 48px);
}
font-size: clamp(24px, 5vw, 48px)
(на телефоне ~24px, на большом экране до 48px)
(на телефоне ~24px, на большом экране до 48px)
✅ Измените ширину окна — размер шрифта меняется плавно, но не выходит за пределы 24–48px
4. Сравнение и применение
| Функция | Что делает | Пример |
|---|---|---|
min(a, b) |
минимальное из a и b | width: min(100%, 500px) |
max(a, b) |
максимальное из a и b | width: max(200px, 50%) |
clamp(min, prefer, max) |
значение в диапазоне | font-size: clamp(24px, 5vw, 48px) |
📌 Где это полезно:
- Адаптивные шрифты без медиа-запросов (
clamp) - Ограничение ширины блоков (
min) - Задание минимальной ширины (
max)
📓 Из тетради: «
clamp() — настоящая магия для адаптивной типографики. Забудьте о куче медиа-запросов для шрифтов. min() и max() упрощают работу с размерами блоков. Но помните: они не работают в старых браузерах (Internet Explorer). Для современных проектов — обязательно к использованию».
← Фильтры и эффекты
Следующая лекция →