Брейкпоинты в 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 */
}
Лайфхаки для использования брейкпоинтов
- Mobile-First подход: Пиши стили сначала для маленьких экранов, а потом используй
min-width
для более крупных. - Относительные единицы: Вместо пикселей используй
em
илиrem
— так дизайн будет адаптироваться под настройки пользователя. - Тестируй на реальных устройствах: Разработчики девтулзы — топ, но ничего не заменит тестов на настоящих девайсах.