У сучасній веб-розробці існують два підходи: адаптивні та респонсивні макети.

Респонсивні макети розроблені для кількох варіантів відображення, які можуть плавно переходити один в одного, забезпечуючи гнучке розтягування та зміну розмірів елементів. При зміні розміру вікна перегляду блоки на сторінці плавно стискаються або розтягуються, а на певній контрольній точці змінюють своє розташування для оптимізації використання горизонтального простору.

Адаптивні макети також мають кілька варіантів відображення, але зміни дизайну відбуваються через чітко визначені стрибки між контрольними точками. Після досягнення контрольної точки дизайн не змінюється до наступної такої точки.

Практика

Створення двох елементів div. Перший елемент матиме адаптивний макет, другий — респонсивний макет. Також необхідно задати різні значення властивості background-color при зміні ширини екрана.

• Для ширини від 0 до 320px колір — #7f58af;
• Для ширини від 321px до 600px колір — #64c5eb;
• Для ширини від 601px до 880px колір — #eb4dba;
• Для ширини від 881px колір — #feb326.

HTML виглядає так:

<div class="adaptive"></div>
<div class="responsive"></div>

Для адаптивного макета також потрібно вказати конкретну ширину для елемента div.

• Для ширини від 321px до 600px ширина — 300px;
• Для ширини від 601px до 880px ширина — 580px;
• Для ширини від 881px ширина — 860px.

CSS виглядає так:

div {
  height: 200px;
  margin: 10px auto;
  background-color: #7f58af;
}

/* ===> Adaptive <=== */

@media screen and (min-width: 321px) {
  .adaptive {
    background-color: #64c5eb;
    width: 300px;
  }
}
@media screen and (min-width: 601px) {
  .adaptive {
    background-color: #eb4dba;
    width: 580px;
  }
}
@media screen and (min-width: 881px) {
  .adaptive {
    background-color: #feb326;
    width: 860px;
  }
}

/* ===> Responsive <=== */

.responsive {
  width: 100%;
}

@media screen and (min-width: 321px) {
  .responsive {
    background-color: #64c5eb;
  }
}
@media screen and (min-width: 601px) {
  .responsive {
    background-color: #eb4dba;
  }
}
@media screen and (min-width: 881px) {
  .responsive {
    background-color: #feb326;
  }
}

Отриманий результат. Зверніть увагу на зміну ширини екрана у верхній частині запису: