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 і кольоровий контраст

Зворотні посилання