Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Вивчайте Створення гнучких макетів для різних розмірів екранів | Адаптивний Вебдизайн у CSS
Просунуті техніки CSS

bookСтворення гнучких макетів для різних розмірів екранів

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

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

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

Практика

Створення двох елементів 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;
  }
}

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

question mark

Виберіть правильні твердження.

Select the correct answer

Все було зрозуміло?

Як ми можемо покращити це?

Дякуємо за ваш відгук!

Секція 6. Розділ 3

Запитати АІ

expand

Запитати АІ

ChatGPT

Запитайте про що завгодно або спробуйте одне із запропонованих запитань, щоб почати наш чат

Suggested prompts:

Can you explain the main differences between adaptive and responsive layouts in simpler terms?

How do the color and width changes work in the provided CSS for each layout?

Can you give more examples of when to use adaptive vs responsive layouts in real projects?

Awesome!

Completion rate improved to 2.04

bookСтворення гнучких макетів для різних розмірів екранів

Свайпніть щоб показати меню

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

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

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

Практика

Створення двох елементів 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;
  }
}

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

question mark

Виберіть правильні твердження.

Select the correct answer

Все було зрозуміло?

Як ми можемо покращити це?

Дякуємо за ваш відгук!

Секція 6. Розділ 3
some-alt