Що таке адаптивний веб-дизайн

Що таке адаптивний веб-дизайн?

Адаптивний веб-дизайн (RWD) — це підхід до веб-розробки, при якому веб-сайт адаптує своє розташування та контент до різних розмірів екранів і пристроїв — настільних комп'ютерів, планшетів та мобільних телефонів.

Основні принципи

1. Рідинні сітки

Використовуйте відносні одиниці (%, fr, vw) замість фіксованих пікселів:

css

.container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
}

2. Гнучкі зображення

Зображення повинні масштабуватися в межах своїх контейнерів:

css

img {
  max-width: 100%;
  height: auto;
}

3. Медіа-запити

Застосовуйте різні стилі в залежності від характеристик екрана:

css

/* Спочатку для мобільних — базові стилі для мобільних */
.sidebar { display: none; }

/* Планшет */
@media (min-width: 768px) {
  .sidebar { display: block; width: 250px; }
}

/* Настільний комп'ютер */
@media (min-width: 1024px) {
  .sidebar { width: 300px; }
}

Мета-тег viewport

Необхідний для мобільного рендерингу:

html

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Без цього тегу мобільні браузери рендерять сторінку на ширину, схожу на настільну, і зменшують масштаб.

Mobile-first проти Desktop-first

Підхід	Як це працює	Медіа-запити
Mobile-first	Базові стилі для мобільних, додавайте складність для більших екранів	`min-width`
Desktop-first	Базові стилі для настільних, спростіть для менших екранів	`max-width`

Mobile-first зазвичай рекомендується, оскільки:

Мобільний трафік перевищує настільний у всьому світі
Змушує вас пріоритетизувати основний контент
Прогресивне покращення є більш надійним

Загальні точки розриву

css

/* Маленькі телефони */   @media (min-width: 480px) { }
/* Планшети */           @media (min-width: 768px) { }
/* Маленькі ноутбуки */  @media (min-width: 1024px) { }
/* Настільні комп'ютери */ @media (min-width: 1280px) { }
/* Великі екрани */      @media (min-width: 1536px) { }

Сучасні адаптивні техніки

CSS Container Queries

css

.card-container { container-type: inline-size; }

@container (min-width: 400px) {
  .card { flex-direction: row; }
}

CSS clamp() для рідинної типографіки

css

h1 { font-size: clamp(1.5rem, 4vw, 3rem); }

auto-fit / auto-fill Grid

css

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

Важливо:

Адаптивний дизайн не є необов'язковим — це вимога для сучасної веб-розробки. Завжди використовуйте мета-тег viewport, надавайте перевагу відносним одиницям і приймайте підхід mobile-first для досягнення найкращих результатів.

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.

Дочитали статтю?

Практика завдань