Адаптивная вёрстка: использование CSS @media, min-width и max-width для создания гибких макетов
Функции min(), max() и clamp() в CSS используются для управления размерами элементов с учетом различных условий, таких как размер экрана, родительского контейнера или другие динамические параметры.
1️⃣ Функция min()
Возвращает наименьшее значение из списка.
📌 Пример 1: Ограничение ширины элемента
css
КопироватьРедактировать
.box { width: min(80vw, 500px); background: lightblue; }
🔹 Что делает?
- Берет меньшее значение между 80vw (80% ширины экрана) и 500px.
- Если экран маленький, 80vw будет меньше 500px, поэтому width будет 80vw.
- Если экран большой, 500px окажется меньше 80vw, и ширина ограничится 500px.
2️⃣ Функция max()
Возвращает наибольшее значение из списка.
📌 Пример 2: Минимальный размер шрифта
css
КопироватьРедактировать
.text { font-size: max(16px, 2vw); }
🔹 Что делает?
- Берет большее значение между 16px и 2vw.
- Если 2vw больше 16px, то используется 2vw.
- Если 2vw меньше 16px, то текст никогда не станет меньше 16px.
3️⃣ Функция clamp()
Определяет значение в заданных пределах: clamp(минимум, предпочтительное, максимум)
📌 Пример 3: Адаптивный размер заголовка
css
КопироватьРедактировать
h1 { font-size: clamp(20px, 5vw, 50px); }
🔹 Что делает?
- Минимальный размер шрифта — 20px.
- Предпочтительный размер — 5vw (5% ширины экрана).
- Максимальный размер — 50px.
- Т.е. шрифт будет адаптироваться, но не выходить за границы 20px и 50px.
🎨 Пример с min(), max(), clamp() вместе
css
КопироватьРедактировать
.box { width: min(90vw, 600px); height: max(200px, 50vh); font-size: clamp(14px, 2vw, 24px); background: coral; }
🔹 Что происходит? ✅ width: не больше 600px, но не шире 90vw. ✅ height: минимум 200px, но не меньше 50vh. ✅ font-size: не меньше 14px, не больше 24px, но в пределах 2vw.
🔥 Когда использовать?
- min() → Когда нужно ограничить максимальный размер (например, ширину контейнера).
- max() → Когда нужно гарантировать минимальный размер (например, кнопки).
- clamp() → Когда нужен адаптивный диапазон значений (например, текст).
Теперь можно делать гибкую вёрстку без @media! 🚀🔥
На самом деле, возможно управлять количеством колонок в CSS Grid без @media, используя min(), max() и clamp(). Достаточно использовать функцию repeat(auto-fit, minmax(…)).
🎯 Как управлять количеством колонок без @media?
Можно использовать автоматическое изменение количества колонок в зависимости от ширины экрана.
css
КопироватьРедактировать
.grid-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 10px; }
🔹 Как это работает?
- repeat(auto-fit, minmax(…)) → автоматическое заполнение колонками.
- min(200px, 100%) → колонка будет не меньше 200px, но не больше 100% (для маленьких экранов).
- 1fr → колонки равномерно распределяются.
💡 Что получается? ✅ Количество колонок меняется динамически в зависимости от ширины контейнера. ✅ Без @media!
📌 Полный пример: Адаптивный Grid без @media
html
КопироватьРедактировать
<style> .grid-container { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 10px; padding: 10px; background: #eee; } .item { background: coral; padding: 20px; text-align: center; font-size: 1.2em; color: white; } </style> <div class=»grid-container»> <div class=»item»>1</div> <div class=»item»>2</div> <div class=»item»>3</div> <div class=»item»>4</div> <div class=»item»>5</div> <div class=»item»>6</div> </div>
📌 Что получится?
- На широких экранах — много колонок.
- На узких экранах — меньше колонок (они автоматически сужаются и переносятся).
- Работает без @media, т.к. ширина колонок динамически регулируется через minmax().
🚀 Теперь Grid полностью адаптивный без @media! 🔥
Хотя min(), max(), clamp() и адаптивный Grid/Flexbox позволяют во многих случаях избежать @media, есть ситуации, когда @media незаменим.
📌 Когда @media необходим?
1️⃣ Скрытие и изменение структуры
🔹 Пример: Показывать меню как список на ПК, но как бургер-меню на мобильных.
css
КопироватьРедактировать
.menu { display: flex; } .burger { display: none; } @media (max-width: 768px) { .menu { display: none; } .burger { display: block; } }
✅ Почему @media?
- display: none не может быть адаптивным без @media.
- Нельзя управлять логикой отображения через min(), max(), clamp().
2️⃣ Разные стили в зависимости от ориентации экрана
🔹 Пример: Изменять стиль для портретного и ландшафтного режимов.
css
КопироватьРедактировать
@media (orientation: landscape) { body { background: lightblue; } } @media (orientation: portrait) { body { background: lightcoral; } }
✅ Почему @media?
- orientation нельзя обработать с помощью min(), max() или clamp().
3️⃣ Темная и светлая тема (prefers-color-scheme)
🔹 Пример: Установка темной темы автоматически.
css
КопироватьРедактировать
@media (prefers-color-scheme: dark) { body { background: black; color: white; } }
✅ Почему @media?
- min(), max(), clamp() работают только с числовыми значениями.
- Нельзя вычислять текущую тему пользователя.
4️⃣ Поддержка разных устройств и типов ввода
🔹 Пример: Менять размер кнопок для тачскрина.
css
КопироватьРедактировать
@media (hover: none) { button { font-size: 20px; padding: 15px; } }
✅ Почему @media?
- Нельзя определить есть ли у устройства мышь с помощью min(), max(), clamp().
5️⃣ Полное изменение Grid/Flexbox-разметки
🔹 Пример: Менять направление флексов на мобилках.
css
КопироватьРедактировать
.flex-container { display: flex; flex-direction: row; } @media (max-width: 600px) { .flex-container { flex-direction: column; } }
✅ Почему @media?
- Нельзя динамически менять flex-direction с row на column без @media.
🎯 Вывод
Когда можно не использовать @media?
✅ Для размеров (ширина, шрифт, отступы) → min(), max(), clamp(). ✅ Для количества колонок → repeat(auto-fit, minmax(…)).
Когда @media незаменим?
❌ Когда нужно скрывать/показывать элементы. ❌ Когда важно изменять направление Flexbox/Grid. ❌ Когда нужно учитывать тему, ориентацию, тип устройства.
🚀 В идеале — комбинировать @media и современные функции для максимальной гибкости! 🔥
Это комментарий