Міжнародний Європейський Університет

Адаптивна верстка

Використовуючи медіа-запити та CSS-правила, для обраних брейкпоінтів, виконати адаптивну верстку для:

1. Десктопної версії
2. Планшетної версії
3. Мобільної версії

Десктопна версія

@media screen and (min-width: 1024px) {
  .partner-block {
    flex-direction: row;
    gap: 60px;
  }
}
            

Пояснення: Для екранів від 1024 пікселів і більше встановлено класичне горизонтальне розташування елементів.

Планшетна версія

@media screen and (min-width: 640px) and (max-width: 1023px) {
  .partner-block {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
}
            

Пояснення: Тут використано логічний оператор and, який задає одночасно дві умови.

Мобільна версія

@media screen and (max-width: 639px) {
  .partner-block {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
}
            

Пояснення: Для екранів до 639px встановлено спрощене вертикальне розміщення елементів. Всі елементи займають 100% ширини екрану.

Висновки

У результаті виконання лабораторної роботи було розроблено адаптивну верстку, яка коректно відображається на різних пристроях: десктопах, планшетах і мобільних телефонах. Використання медіа-запитів та логічних операторів у CSS дозволяє забезпечити зручне та привабливе відображення сторінки незалежно від розміру екрана.