Tworzenie strony mobilnej z Media Queries

Tworzenie strony mobilnej z Media Queries

Tworzenie strony mobilnej to jeden z najważniejszych elementów współczesnego projektowania.
Obecnie większość ruchu internetowego pochodzi z urządzeń mobilnych – smartfonów, tabletów, małych laptopów. Dlatego responsywność to już nie dodatek, a standard projektowy.

W tej lekcji pokażemy, jak – dzięki Media Queries – przekształcić prosty układ w pełni mobilną wersję strony.
Zastosujemy podejście Mobile First, czyli najpierw styl dla najmniejszych ekranów, a potem „rozszerzenia” na większe rozdzielczości.

Krok 1: Podstawowy układ karty (mobile first)

<style>
body {
  font-family: sans-serif;
  margin: 0;
  padding: 0;
  background: #fafafa;
}

.card {
  background: white;
  padding: 16px;
  margin: 16px;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.card h2 {
  font-size: 18px;
  margin-bottom: 8px;
}

.card p {
  font-size: 14px;
  line-height: 1.5;
}
</style>

<div class="card">
  <h2>Tytuł karty</h2>
  <p>To przykładowa zawartość elementu, która na urządzeniach mobilnych jest dobrze widoczna i czytelna.</p>
</div>

Ten układ wygląda dobrze na telefonie – ma marginesy, duży tekst, pojedynczą kolumnę. Ale co z większymi ekranami?

Krok 2: Styl dla większych ekranów (tablet i desktop)

@media (min-width: 768px) {
  .card {
    max-width: 600px;
    margin: 32px auto;
    padding: 32px;
  }

  .card h2 {
    font-size: 24px;
  }

  .card p {
    font-size: 16px;
  }
}

Efekt: na ekranach powyżej 768px karta:

• jest szersza, ale nadal nie na całą szerokość,
• ma większe odstępy i czcionki,
• zostaje wycentrowana, co wygląda lepiej na desktopie.

Krok 3: Układ siatki (więcej kart obok siebie)

Załóżmy, że chcesz mieć kilka kart obok siebie – na większych ekranach. To też można zrobić przez Media Queries:

<style>
.cards {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px;
}

@media (min-width: 768px) {
  .cards {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
  }

  .card {
    flex: 1 1 300px;
    max-width: 320px;
  }
}
</style>

<div class="cards">
  <div class="card">
    <h2>Karta 1</h2>
    <p>Zawartość pierwszej karty.</p>
  </div>
  <div class="card">
    <h2>Karta 2</h2>
    <p>Zawartość drugiej karty.</p>
  </div>
</div>

Na małych ekranach karty będą pod sobą. Na większych – obok siebie w dwóch kolumnach.

Krok 4: Przykład ze zmieniającym się layoutem

Możesz zmieniać nie tylko rozmiary – ale też układ, np. układ z obrazkiem:

.article {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

@media (min-width: 768px) {
  .article {
    flex-direction: row;
    align-items: center;
  }

  .article img {
    max-width: 300px;
  }
}

Na mobile: obrazek na górze, tekst pod spodem. Na desktopie: obok siebie w poziomie.

Najczęstsze breakpointy (rozmiary ekranów)

Dobre praktyki przy tworzeniu mobilnej wersji

• Stosuj flexbox lub grid – to elastyczne narzędzia do zmiany układu.
• Rozdziel logikę mobile i desktop – nie mieszaj stylów bez potrzeby.
• Upewnij się, że czcionki są wystarczająco duże do czytania na telefonie.
• Testuj na różnych urządzeniach i emulatorach przeglądarki.

Podsumowanie

• Za pomocą Media Queries możesz tworzyć dynamiczne, dopasowane layouty na każdy rozmiar ekranu.
• Podejście Mobile First zapewnia lepszą wydajność i kontrolę.
• Nawet prosty układ można łatwo „rozbudować” na desktop za pomocą kilku linijek kodu.

W kolejnej lekcji pokażemy Ci, jak testować responsywność strony na różnych urządzeniach – nie tylko w praktyce, ale i z użyciem narzędzi przeglądarki.