Dostosowanie layoutu do urządzeń mobilnych

Dostosowanie layoutu do urządzeń mobilnych

Responsywność to dziś absolutna podstawa. Coraz więcej użytkowników przegląda strony na smartfonach i tabletach – jeśli Twoja strona nie działa dobrze na małym ekranie, stracisz wielu odbiorców.

W tej lekcji nauczysz się, jak:

• korzystać z Media Queries, aby dostosować styl do szerokości ekranu,
• zmieniać układ Flexbox i Grid na mobile,
• kontrolować rozmiary fontów i elementów interaktywnych,
• tworzyć przyjazne użytkownikowi wersje mobilne strony.

1. Dodaj Media Query dla urządzeń mobilnych

Najczęściej stosuje się warunek szerokości ekranu – np. dla urządzeń o szerokości do 768px:

@media (max-width: 768px) {
  body {
    font-size: 16px;
    padding: 10px;
  }

  header {
    flex-direction: column;
    align-items: flex-start;
  }

  .features {
    flex-direction: column;
    gap: 20px;
  }

  .nav {
    flex-direction: column;
    gap: 8px;
  }
}

Efekt: menu, karty, nagłówki – wszystko układa się jeden pod drugim, z większymi odstępami i czytelną czcionką.

2. Używaj jednostek elastycznych

Zamiast ustalonych wartości (np. width: 400px), używaj %, em, rem, vw, vh.
To sprawia, że elementy automatycznie dopasowują się do wielkości ekranu.

.container {
  max-width: 100%;
  padding: 2rem;
}

img {
  max-width: 100%;
  height: auto;
}

3. Układ w Flexboxie lub Gridzie? Uprość go

W wersji desktopowej możesz mieć siatkę 3–kolumnową, ale na mobile lepiej przejść do jednej kolumny:

@media (max-width: 480px) {
  .grid-layout {
    grid-template-columns: 1fr;
    grid-template-areas: 
      "header"
      "main"
      "aside"
      "footer";
  }
}

Wskazówka: korzystaj z flex-direction: column i grid-template-columns: 1fr, by przejść do układu jednokolumnowego.

4. Zadbaj o wygodę użytkownika

• Upewnij się, że linki i przyciski mają minimum 40x40px obszaru klikalnego,
• Zadbaj o odpowiedni rozmiar czcionki – minimum 16px,
• Usuń efekty hover lub zamień je na widoczne zmiany np. koloru lub cienia,
• Unikaj poziomego scrollowania – powinno go nie być w ogóle.

5. Testuj stronę na telefonie lub w trybie responsywnym

Najlepszy sposób to przetestowanie strony bezpośrednio na telefonie lub w narzędziach developerskich (np. Chrome → F12 → ikona urządzenia).

Sprawdź:

• czy wszystkie sekcje są widoczne i nie nachodzą na siebie,
• czy fonty są czytelne,
• czy użytkownik nie musi przewijać poziomo,
• czy formularze i multimedia działają poprawnie.

Podsumowanie

• Stosuj @media (max-width: ...), aby dostosować style do urządzeń mobilnych,
• Używaj elastycznych jednostek i układów,
• Dostosuj Flexbox i Grid do układu jednokolumnowego,
• Testuj swoją stronę na różnych ekranach – to klucz do dobrej responsywności.

Po tej lekcji Twój projekt będzie w pełni responsywny i gotowy do publikacji!
W kolejnym kroku przygotujemy quiz końcowy i zadanie praktyczne dla całego modułu 5.