Адаптивная вёрстка: использование 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 и современные функции для максимальной гибкости! 🔥