Twoje Centrum Szkoleniowe

Media queries: responsywność i dostosowanie do urządzeń mobilnych

Media queries pozwala na stosowanie różnych stylów w zależności od cech urządzenia, takich jak szerokość i wysokość ekranu, rozdzielczość, orientacja i wiele innych. W tej lekcji dowiesz się, jak z nich korzystać, aby zapewnić użytkownikom doskonałe doświadczenie niezależnie od urządzenia, z którego korzystają.

Dlaczego responsywność jest ważna?

• Różnorodność urządzeń: Użytkownicy korzystają z wielu urządzeń o różnych rozmiarach ekranu – od smartfonów, przez tablety, po duże monitory.
• Doświadczenie użytkownika: Strony dostosowane do urządzenia zapewniają lepszą czytelność, nawigację i ogólne wrażenia.
• Pozycjonowanie w wyszukiwarkach: Google i inne wyszukiwarki faworyzują strony responsywne w wynikach wyszukiwania.
• Przyszłościowe podejście: Responsywność gwarantuje, że strona będzie wyglądać dobrze na przyszłych urządzeniach o nieznanych jeszcze rozmiarach.

Co to są media queries?

Media queries to funkcje w CSS, które pozwalają na stosowanie różnych stylów w zależności od cech urządzenia. Dzięki nim możemy określić, jakie style mają być stosowane np. dla ekranów o szerokości poniżej 768px (typowe dla urządzeń mobilnych) czy dla drukarek.

Składnia media queries

Podstawowa składnia media queries wygląda następująco:

@media (warunek) {
  /* Style CSS */
}

Przykład:

@media (max-width: 768px) {
  body {
    background-color: lightblue;
  }
}

W powyższym przykładzie, gdy szerokość ekranu wynosi maksymalnie 768px, tło strony będzie miało kolor jasnoniebieski.

Rodzaje media queries

1. max-width i min-width

• max-width: Styl będzie stosowany, gdy szerokość ekranu jest mniejsza lub równa podanej wartości.
• min-width: Styl będzie stosowany, gdy szerokość ekranu jest większa lub równa podanej wartości.

Przykłady:

/* Styl dla ekranów o szerokości maksymalnie 600px */
@media (max-width: 600px) {
  /* Style CSS */
}

/* Styl dla ekranów o szerokości co najmniej 1024px */
@media (min-width: 1024px) {
  /* Style CSS */
}

2. max-height i min-height

Działają analogicznie do max-width i min-width, ale odnoszą się do wysokości ekranu.

Przykład:

@media (max-height: 800px) {
  /* Style CSS */
}

3. orientation

Pozwala na zastosowanie stylów w zależności od orientacji ekranu.

• orientation: portrait: Ekran jest w orientacji pionowej (wysokość większa niż szerokość).
• orientation: landscape: Ekran jest w orientacji poziomej (szerokość większa niż wysokość).

Przykład:

@media (orientation: landscape) {
  /* Style CSS */
}

4. resolution

Pozwala na zastosowanie stylów w zależności od rozdzielczości ekranu.

Przykład:

@media (min-resolution: 300dpi) {
  /* Style CSS */
}

5. Łączenie warunków

Możemy łączyć warunki za pomocą słów kluczowych and, or, not.

Przykład:

/* Styl dla ekranów o szerokości maksymalnie 768px i orientacji pionowej */
@media (max-width: 768px) and (orientation: portrait) {
  /* Style CSS */
}

Praktyczne zastosowanie media queries

1. Tworzenie responsywnego układu

HTML:

<div class="container">
  <div class="box">Element 1</div>
  <div class="box">Element 2</div>
  <div class="box">Element 3</div>
</div>

CSS:

.container {
  display: flex;
  flex-wrap: wrap;
}

.box {
  flex: 1 1 33%;
  padding: 20px;
  background-color: #3498db;
  color: #fff;
  margin: 10px;
  text-align: center;
}

/* Styl dla ekranów o szerokości maksymalnie 768px */
@media (max-width: 768px) {
  .box {
    flex: 1 1 100%;
  }
}

Wyjaśnienie:

• Na dużych ekranach elementy .box są wyświetlane w trzech kolumnach.
• Gdy szerokość ekranu jest mniejsza lub równa 768px, elementy .box zajmują 100% szerokości, tworząc układ jednokolumnowy.

2. Ukrywanie elementów na urządzeniach mobilnych

CSS:

/* Domyślnie element jest widoczny */
.sidebar {
  display: block;
}

/* Ukrywamy sidebar na urządzeniach mobilnych */
@media (max-width: 600px) {
  .sidebar {
    display: none;
  }
}

3. Zmiana rozmiarów czcionek

CSS:

body {
  font-size: 16px;
}

/* Zwiększamy rozmiar czcionki na większych ekranach */
@media (min-width: 1200px) {
  body {
    font-size: 18px;
  }
}

Podejście Mobile First vs Desktop First

Mobile First

• Definicja: Najpierw projektujemy i stylujemy stronę dla urządzeń mobilnych, a następnie dodajemy style dla większych ekranów.
• Zalety:
  • Upewniamy się, że strona działa dobrze na urządzeniach mobilnych.
  • Możliwość optymalizacji wydajności dla wolniejszych połączeń.

Przykład:

/* Style dla urządzeń mobilnych */
.container {
  flex-direction: column;
}

/* Dodajemy style dla większych ekranów */
@media (min-width: 768px) {
  .container {
    flex-direction: row;
  }
}

Desktop First

• Definicja: Najpierw projektujemy i stylujemy stronę dla dużych ekranów, a następnie dostosowujemy ją do urządzeń mobilnych.
• Zalety:
  • Tradycyjne podejście, często łatwiejsze dla początkujących.
  • Możliwość skupienia się na pełnej funkcjonalności strony.

Przykład:

/* Style dla dużych ekranów */
.container {
  flex-direction: row;
}

/* Dostosowujemy dla urządzeń mobilnych */
@media (max-width: 768px) {
  .container {
    flex-direction: column;
  }
}

Używanie jednostek względnych

Korzystanie z jednostek względnych, takich jak %, em, rem, pomaga w tworzeniu bardziej elastycznych i responsywnych stron.

Przykład z rem:

html {
  font-size: 16px;
}

body {
  font-size: 1rem; /* 16px */
}

h1 {
  font-size: 2rem; /* 32px */
}

@media (max-width: 600px) {
  html {
    font-size: 14px;
  }
}

W powyższym przykładzie, gdy szerokość ekranu jest mniejsza lub równa 600px, podstawowy rozmiar czcionki zmienia się na 14px, a wszystkie elementy korzystające z rem automatycznie się dostosowują.

Meta tag viewport

Aby strona była poprawnie wyświetlana na urządzeniach mobilnych, konieczne jest dodanie meta tagu viewport w sekcji <head> dokumentu HTML.

Przykład:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Wyjaśnienie:

• width=device-width: Ustawia szerokość strony na szerokość urządzenia.
• initial-scale=1.0: Ustawia początkową skalę na 100%.

Dobre praktyki

• Projektuj z myślą o użytkowniku: Upewnij się, że strona jest czytelna i łatwa w nawigacji na wszystkich urządzeniach.
• Testuj na różnych urządzeniach: Sprawdzaj, jak strona wygląda na różnych rozmiarach ekranu i w różnych przeglądarkach.
• Minimalizuj ilość stylów: Używaj media queries tylko tam, gdzie jest to konieczne, aby uprościć kod CSS.
• Używaj elastycznych jednostek miary: Jednostki względne pomagają w tworzeniu responsywnych układów.
• Optymalizuj obrazy: Upewnij się, że obrazy są odpowiednio skompresowane i dostosowane do różnych rozmiarów ekranów.

Częste błędy i jak ich unikać

Brak meta tagu viewport: Bez niego strona może być nieprawidłowo skalowana na urządzeniach mobilnych.
Rozwiązanie: Zawsze dodawaj meta tag viewport w sekcji <head>.

Nadmierne poleganie na jednostkach stałych: Używanie pikseli zamiast jednostek względnych może prowadzić do problemów z responsywnością.
Rozwiązanie: Używaj jednostek względnych (%, em, rem) tam, gdzie to możliwe.

Nieprzemyślane media queries: Tworzenie zbyt wielu punktów przełomowych może skomplikować kod i utrudnić utrzymanie.
Rozwiązanie: Skup się na kluczowych rozmiarach ekranu i stosuj media queries tylko tam, gdzie jest to konieczne.

Zapominanie o testowaniu: Nie testowanie strony na różnych urządzeniach może prowadzić do nieoczekiwanych problemów.
Rozwiązanie: Regularnie testuj stronę na różnych urządzeniach i emulatorach.

Podsumowanie

W tej lekcji nauczyliśmy się:

• Czym są media queries i jak ich używać w CSS.
• Jak tworzyć responsywne układy, które dostosowują się do różnych rozmiarów ekranów.
• Różnic między podejściem Mobile First i Desktop First.
• Znaczenia jednostek względnych w tworzeniu elastycznych układów.
• Jak używać meta tagu viewport, aby strona była poprawnie wyświetlana na urządzeniach mobilnych.
• Dobrych praktyk i jak unikać typowych błędów związanych z responsywnym designem.

Responsywność jest kluczowym elementem nowoczesnego web designu. Dzięki media queries możemy tworzyć strony, które są nie tylko estetyczne, ale przede wszystkim funkcjonalne i przyjazne dla użytkownika na każdym urządzeniu.

Zadania do samodzielnego wykonania

1. Stwórz prostą stronę wizytówkę:

   • Zaprojektuj stronę z nagłówkiem, treścią i stopką.
   • Użyj media queries, aby dostosować układ dla urządzeń mobilnych (np. zmień układ z dwukolumnowego na jednokolumnowy).
   • Dodaj meta tag viewport w sekcji <head>.

2. Zaprojektuj responsywne menu nawigacyjne:

   • Utwórz menu, które na dużych ekranach jest wyświetlane w linii, a na urządzeniach mobilnych zamienia się w ikonę "hamburger" (możesz użyć prostego JavaScriptu do obsługi kliknięcia).
   • Użyj media queries do zmiany stylów w zależności od szerokości ekranu.

3. Eksperymentuj z różnymi punktami przełomowymi:

   • Stwórz stronę z kilkoma sekcjami i zastosuj media queries dla różnych szerokości ekranu (np. 480px, 768px, 1024px).
   • Zmieniaj kolory tła, rozmiary czcionek i układ elementów w zależności od punktu przełomowego.

Ciekawostka

Czy wiesz, że pojęcie Responsive Web Design zostało wprowadzone przez Ethana Marcotte'a w 2010 roku? Jego artykuł i późniejsza książka na ten temat zrewolucjonizowały sposób projektowania stron internetowych, kładąc nacisk na elastyczność i dostosowywanie się do potrzeb użytkowników korzystających z różnych urządzeń.