kpiIcon

Звіти з лабораторних робіт
з дисципліни "WEB-орієнтовані технології."
Основи Frontend та Backend розробок

Студента групи ІО-15 Жердєва Данила

ZherdievD
Лабораторна робота №1 Лабораторна робота №2 Лабораторна робота №3 Лабораторна робота №4 Лабораторна робота №5 Лабораторна робота №5.1 Лабораторна робота №6 Лабораторна робота №7 Лабораторна робота №8 Лабораторна робота №9
Тема,мета місце розташування лаби Медіа запити Адаптивна верстка Дескотопна версія Планшетна версія Мобільна версія Висновки

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

Для контролю за виглядом застосунку на мобільних пристроях був доданий такий медіа запит:

            @media (min-width: 344px) and (max-width: 767px){
                .header{
                  height: auto;
                }
                .header-container {
                  flex-direction: column;
                  align-items: center;
                }
              
                .nav-list {
                  flex-direction: column;
                  gap: 10px;
                }
            }

Цей медіазапит змінює положення елементів в хедері, тобто коли ширина екрану більша або рівна 344px та менша або рівна екрану розміром 767px, елементи в хедері будуть йти стовпчиком один за одним

Скріншоти застосунка