Адаптивний дизайн і media queries
Сайт, який добре виглядає на будь-якому пристрої
Адаптивний дизайн — як вода
Вода приймає форму будь-якої посудини. Адаптивний сайт — те ж саме: на телефоні показує одну колонку, на планшеті дві, на десктопі три. Контент не обрізається і не стирчить за межі.
Viewport мета-тег — обов'язково!
<meta name="viewport" content="width=device-width, initial-scale=1.0">Без цього мобільний браузер масштабує сторінку як на десктопі (всі елементи маленькі). З ним — сторінка займає реальну ширину екрана.
Media queries — стилі для конкретних розмірів
/* Mobile First — починаємо з мобільного */
.cards { grid-template-columns: 1fr; } /* 1 колонка для телефону */
@media (min-width: 640px) {
.cards { grid-template-columns: repeat(2, 1fr); } /* планшет — 2 */
}
@media (min-width: 1024px) {
.cards { grid-template-columns: repeat(3, 1fr); } /* десктоп — 3 */
}Mobile First — правильний підхід: спочатку мобільна версія, потім додаємо складність для більших екранів через min-width.
Типові брейкпоінти
| Назва | min-width | Для чого |
|---|---|---|
| sm | 640px | Великі телефони |
| md | 768px | Планшети |
| lg | 1024px | Ноутбуки |
| xl | 1280px | Великі монітори |
Fluid typography з clamp()
/* clamp(мінімум, ідеально, максимум) */
h1 {
font-size: clamp(1.75rem, 5vw, 3rem);
/* на телефоні: 1.75rem, на десктопі: 3rem, між — пропорційно */
}vw = 1% від ширини viewport. 5vw = 5% від ширини екрана.
Mobile First + три брейкпоінти. Весь макет адаптується від 1 до 3 колонок з мінімумом коду.
Перевіряй адаптивність у DevTools браузера: кнопка Toggle Device Toolbar (Ctrl+Shift+M в Chrome). Там можна вибрати конкретний телефон або змінювати ширину вручну.