Метка: breakpoint css

Брейкпоинты в CSS используются для создания адаптивного дизайна, чтобы стили менялись под определённые размеры экрана или другие условия. В HTML5 конкретных брейкпоинтов нет, но CSS позволяет настроить их под любые нужды проекта.

Популярные брейкпоинты

Это стандартные размеры экранов, которые чаще всего используют веб-разработчики. Их можно модифицировать под свой проект:

/* Очень маленькие устройства (вертикальные смартфоны, меньше 576px) */
@media (max-width: 575.98px) {
  /* Стили для очень маленьких экранов */
}

/* Маленькие устройства (горизонтальные смартфоны, от 576px и выше) */
@media (min-width: 576px) and (max-width: 767.98px) {
  /* Стили для маленьких экранов */
}

/* Средние устройства (планшеты, от 768px и выше) */
@media (min-width: 768px) and (max-width: 991.98px) {
  /* Стили для планшетов */
}

/* Большие устройства (десктопы, от 992px и выше) */
@media (min-width: 992px) and (max-width: 1199.98px) {
  /* Стили для больших экранов */
}

/* Очень большие устройства (широкие мониторы, от 1200px и выше) */
@media (min-width: 1200px) {
  /* Стили для очень больших экранов */
}

Кастомные брейкпоинты

Если проект требует более точных настроек, например, под какие-то специфичные устройства, вот пример кастомного брейкпоинта:

/* Для маленьких экранов шириной до 400px */
@media (max-width: 400px) {
  /* Стили для супер-компактных экранов */
}

Медиа-запросы по ориентации экрана

Иногда важно знать, держит пользователь устройство вертикально или горизонтально:

/* Вертикальная ориентация экрана */
@media (orientation: portrait) {
  /* Стили для портретного режима */
}

/* Горизонтальная ориентация экрана */
@media (orientation: landscape) {
  /* Стили для альбомного режима */
}

Медиа-запросы по соотношению сторон

Если проект требует дизайна, завязанного на пропорции экрана:

@media (aspect-ratio: 16/9) {
  /* Стили для экранов с соотношением 16:9 */
}

Лайфхаки для использования брейкпоинтов

1. Mobile-First подход: Пиши стили сначала для маленьких экранов, а потом используй min-width для более крупных.
2. Относительные единицы: Вместо пикселей используй em или rem — так дизайн будет адаптироваться под настройки пользователя.
3. Тестируй на реальных устройствах: Разработчики девтулзы — топ, но ничего не заменит тестов на настоящих девайсах.