Размеры экранов
111
Редактировать...## Основные брейкпоинты для медиазапросов (2024-2025)
### Стандартный подход (рекомендуемый Bootstrap 5):
```css
/* Extra small (xs) - смартфоны портрет */
@media (max-width: 575.98px) { }
/* Small (sm) - смартфоны альбом / маленькие планшеты */
@media (min-width: 576px) and (max-width: 767.98px) { }
/* Medium (md) - планшеты */
@media (min-width: 768px) and (max-width: 991.98px) { }
/* Large (lg) - ноутбуки / десктоп */
@media (min-width: 992px) and (max-width: 1199.98px) { }
/* Extra large (xl) - большие мониторы */
@media (min-width: 1200px) and (max-width: 1399.98px) { }
/* Extra extra large (xxl) - очень большие мониторы */
@media (min-width: 1400px) { }
```
### Упрощенный практичный набор (используется чаще всего):
```css
/* Мобильные телефоны */
@media (max-width: 480px) { }
/* Планшеты и крупные телефоны */
@media (min-width: 481px) and (max-width: 768px) { }
/* Ноутбуки и маленькие мониторы */
@media (min-width: 769px) and (max-width: 1024px) { }
/* Десктоп */
@media (min-width: 1025px) and (max-width: 1200px) { }
/* Большие экраны */
@media (min-width: 1201px) { }
```
### Mobile-first подход (рекомендуется):
```css
/* Базовые стили для мобильных (до 576px) */
/* Планшеты */
@media (min-width: 576px) { }
/* Планшеты в альбомной */
@media (min-width: 768px) { }
/* Ноутбуки */
@media (min-width: 992px) { }
/* Десктоп */
@media (min-width: 1200px) { }
/* Большие экраны */
@media (min-width: 1400px) { }
```
## Можно ли обойтись без медиазапросов с Grid?
**ДА!** Современный CSS Grid и Flexbox позволяют создавать адаптивные макеты без медиазапросов:
### 1. **Grid с auto-fit/minmax()** (самый мощный способ)
```css
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
}
/* Колонки автоматически переносятся при уменьшении экрана */
```
### 2. **Flexbox с flex-wrap**
```css
.container {
display: flex;
flex-wrap: wrap;
gap: 20px;
}
.item {
flex: 1 1 300px; /* Базовый размер 300px, но может сжиматься */
min-width: 250px; /* Минимальная ширина перед переносом */
}
```
### 3. **Grid с названиями областей** (для сложных макетов)
```css
.container {
display: grid;
grid-template-areas:
"header"
"main"
"sidebar"
"footer";
grid-template-columns: 1fr;
}
@media (min-width: 768px) {
.container {
grid-template-areas:
"header header"
"main sidebar"
"footer footer";
grid-template-columns: 2fr 1fr;
}
}
```
### 4. **Современные единицы и функции** (без медиазапросов):
```css
.container {
display: grid;
/* clamp(min, preferred, max) */
grid-template-columns: repeat(auto-fit, minmax(clamp(200px, 30vw, 300px), 1fr));
/* container queries единицы */
width: min(100%, 1200px);
padding: max(1rem, 5vw);
font-size: clamp(1rem, 2.5vw, 1.5rem);
}
```
### 5. **CSS Container Queries** (новый стандарт 2023+)
```css
/* Стили применяются к элементу в зависимости от размера его контейнера */
.component {
container-type: inline-size;
}
@container (min-width: 400px) {
.component {
/* стили когда контейнер шире 400px */
}
}
```
## Практические рекомендации:
### Когда использовать медиазапросы:
1. **Кардинальные изменения layout** (меняется сетка, структура)
2. **Навигация/меню** (бургер-меню на мобильных)
3. **Размеры шрифтов** для читабельности
4. **Отступы/падинги** для touch-устройств
5. **Скрытие/показ элементов** на разных устройствах
### Когда можно без медиазапросов:
1. **Адаптивные сетки** - Grid с `auto-fit`/`minmax()`
2. **Гибкие изображения** - `max-width: 100%`
3. **Типографика** - `clamp()` для шрифтов
4. **Простые колонки** - Flexbox с `flex-wrap`
5. **Относительные размеры** - `vw`, `%`, `fr`
## Пример полного адаптивного макета БЕЗ медиазапросов:
```css
.container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
gap: clamp(1rem, 3vw, 2rem);
padding: clamp(1rem, 5vw, 3rem);
width: min(100% - 2rem, 1200px);
margin: 0 auto;
}
.card {
font-size: clamp(1rem, 2vw, 1.25rem);
padding: clamp(1rem, 3vw, 2rem);
}
```
## Оптимальный подход на 2024:
1. **Начинайте с mobile-first без медиазапросов**
2. **Используйте Grid/Flexbox для базовой адаптивности**
3. **Добавляйте 2-3 ключевых медиазапроса** только там где нужно:
- `@media (max-width: 768px)` - мобильные
- `@media (min-width: 769px) and (max-width: 1024px)` - планшеты
- `@media (min-width: 1200px)` - десктоп
4. **Используйте `clamp()`** для плавных изменений размеров
**Итог:** Для 80% задач хватает Grid с `auto-fit/minmax()` + `clamp()` для типографики. Медиазапросы добавляйте только для сложных перестроек макета.