Створення гнучких макетів для різних розмірів екранів
У сучасній веб-розробці існують два підходи: адаптивні та респонсивні макети.
Респонсивні макети розроблені для кількох варіантів відображення, які можуть плавно переходити один в одного, забезпечуючи гнучке розтягування та зміну розмірів елементів. При зміні розміру вікна перегляду блоки на сторінці плавно стискаються або розтягуються, а на певній контрольній точці змінюють своє розташування для оптимізації використання горизонтального простору.
Адаптивні макети також мають кілька варіантів відображення, але зміни дизайну відбуваються через чітко визначені стрибки між контрольними точками. Після досягнення контрольної точки дизайн не змінюється до наступної такої точки.
Практика
Створення двох елементів 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;
}
}
Отриманий результат. Зверніть увагу на зміну ширини екрана у верхній частині запису:
Дякуємо за ваш відгук!
Запитати АІ
Запитати АІ
Запитайте про що завгодно або спробуйте одне із запропонованих запитань, щоб почати наш чат
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
Створення гнучких макетів для різних розмірів екранів
Свайпніть щоб показати меню
У сучасній веб-розробці існують два підходи: адаптивні та респонсивні макети.
Респонсивні макети розроблені для кількох варіантів відображення, які можуть плавно переходити один в одного, забезпечуючи гнучке розтягування та зміну розмірів елементів. При зміні розміру вікна перегляду блоки на сторінці плавно стискаються або розтягуються, а на певній контрольній точці змінюють своє розташування для оптимізації використання горизонтального простору.
Адаптивні макети також мають кілька варіантів відображення, але зміни дизайну відбуваються через чітко визначені стрибки між контрольними точками. Після досягнення контрольної точки дизайн не змінюється до наступної такої точки.
Практика
Створення двох елементів 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;
}
}
Отриманий результат. Зверніть увагу на зміну ширини екрана у верхній частині запису:
Дякуємо за ваш відгук!