EMZETT.
Войти

Emzett Wiki

Медиазапросы и точки перелома: адаптация макета под экраны

Properties1
tagsglossar, css, frontend

время чтения ~2 мин.

Медиазапросы и точки перелома: адаптация макета под экраны

Коротко: С помощью медиазапросов правила CSS применяются только при определённых условиях, например начиная с некоторой ширины экрана; так страница подстраивается под телефон, планшет и десктоп.

Подробнее: Адаптивная страница хорошо выглядит на любом устройстве. Предпосылка — <meta name="viewport" content="width=device-width, initial-scale=1"> в HTML, чтобы мобильные браузеры использовали реальную ширину.

Подробности

Синтаксис и mobile-first

.card { display: block; }            /* по умолчанию: телефон */
@media (min-width: 768px) {
  .card { display: flex; gap: 1rem; } /* от планшета */
}
@media (min-width: 1200px) {
  .card { max-width: 1100px; }        /* от десктопа */
}

Mobile-first: сначала пишите макет для малых экранов, затем добавляйте для больших через min-width. Это обычно проще и загружает на телефон меньше лишнего.

Типичные точки перелома

Примерно 640 px (большой телефон), 768 px (планшет), 1024 px (небольшой ноутбук), 1280 px (десктоп). Подбирайте точки перелома по содержимому: где ломается макет? Поставьте точку там. Используйте относительные единицы (rem, %, vw) и clamp() для плавных размеров шрифта: font-size: clamp(1rem, 2.5vw, 1.5rem);.

Другие запросы

  • prefers-color-scheme: dark: тёмный режим системы.
  • prefers-reduced-motion: reduce: уменьшить анимации (доступность).
  • orientation: landscape, print для печати.
  • hover: hover и pointer: coarse: мышь и сенсорное управление.
  • Контейнерные запросы (@container) реагируют на размер окружающего элемента, а не окна, идеально для многократно используемых компонентов.

Проверка и подводные камни

Тестируйте с помощью значков устройств в инструментах разработчика браузера (F12) и на реальных устройствах. Избегайте фиксированной ширины в пикселях, горизонтальной прокрутки и слишком маленьких целей нажатия (не менее примерно 44 px). Адаптируйте изображения через max-width: 100% и srcset. Flexbox и Grid многое решают и без медиазапросов (flex-wrap, repeat(auto-fit, minmax(...))).

См. также: WCAG и цветовой контраст

Обратные ссылки