Kurs HTML

Czym są Media Queries?

Media Queries (Zapytania o Media) to fundamentalna technika CSS w Responsive Web Design. Pozwalają one na **warunkowe stosowanie bloków stylów CSS** tylko wtedy, gdy określone warunki dotyczące urządzenia lub przeglądarki (czyli medium) są spełnione.

Dzięki Media Queries możemy:

• Zmieniać układ strony (np. z dwukolumnowego na jednokolumnowy).
• Dostosowywać rozmiary czcionek, marginesów, paddingów.
• Ukrywać lub pokazywać pewne elementy.
• Ładować różne obrazy tła.
• Stosować inne style w zależności od szerokości ekranu, orientacji urządzenia, rozdzielczości i wielu innych cech.

Media Queries są kluczem do tworzenia stron, które wyglądają dobrze i są funkcjonalne na różnych urządzeniach.

Podstawowa składnia

Media Query zaczyna się od słowa kluczowego @media, po którym następuje opcjonalny **typ medium** i/lub jeden lub więcej **warunków dotyczących cech medium**, zamkniętych w nawiasach okrągłych. Jeśli warunki są spełnione, stosowane są reguły CSS zdefiniowane wewnątrz bloku { }.

@media [media-type] [and|not|only] (media-feature: value) {
  /* Reguły CSS stosowane, gdy warunki są spełnione */
  selector {
    property: value;
  }
}Kopiuj

Rozbijmy to na części:

• @media: Słowo kluczowe rozpoczynające Media Query.
• [media-type] (opcjonalny): Określa typ urządzenia, dla którego mają być stosowane style. Najczęściej używane typy to:
  • all: Dla wszystkich urządzeń (domyślny, jeśli nie podano typu).
  • screen: Dla ekranów komputerów, tabletów, smartfonów.
  • print: Dla drukarek i podglądu wydruku.
  • speech: Dla czytników ekranu.
• [and|not|only] (opcjonalne): Operatory logiczne do łączenia wielu warunków lub typów mediów (omówimy je w następnej lekcji). Słowo kluczowe and jest najczęściej używane do łączenia typu medium z cechą medium lub wielu cech.
• (media-feature: value): Warunek dotyczący konkretnej cechy urządzenia lub przeglądarki. Jest to najważniejsza część RWD. Przykłady cech:
  • width: Szerokość obszaru wyświetlania (viewportu).
  • height: Wysokość obszaru wyświetlania.
  • orientation: Orientacja urządzenia (portrait lub landscape).
  • resolution: Rozdzielczość ekranu (np. w dpi).
  • aspect-ratio: Proporcje ekranu.
  • ...i wiele innych.
  Często używa się prefiksów min- i max- z cechami takimi jak width czy height (np. min-width, max-height), aby określić zakresy.
• { /* Reguły CSS */ }: Blok zawierający standardowe reguły CSS, które zostaną zastosowane, jeśli warunki Media Query będą prawdziwe.

Prosty przykład: Zmiana koloru tła

Załóżmy, że chcemy, aby tło strony było jasnoszare domyślnie, ale stawało się jasnoniebieskie na ekranach o szerokości co najmniej 600 pikseli.

body {
  background-color: #f0f0f0; /* Domyślne tło */
}

/* Stosuj te style tylko na ekranach (screen) */
/* I tylko wtedy, gdy szerokość viewportu (width) */
/* jest równa lub większa niż (min-width) 600 pikseli */
@media screen and (min-width: 600px) {
  body {
    background-color: lightblue;
  }
}
Kopiuj

W tym przykładzie:

• screen to typ medium.
• and łączy typ medium z cechą.
• (min-width: 600px) to warunek dotyczący cechy medium - minimalna szerokość viewportu musi wynosić 600px.

Gdy użytkownik ogląda stronę na urządzeniu z ekranem szerszym niż 600px, tło stanie się jasnoniebieskie. Na węższych ekranach pozostanie jasnoszare.

Punkty przerwania (Breakpoints)

Wartości szerokości (lub innych cech), przy których zmieniamy układ lub style strony za pomocą Media Queries, nazywane są **punktami przerwania (breakpoints)**. Wybór odpowiednich punktów przerwania jest kluczowy w RWD.

Zamiast celować w konkretne rozmiary popularnych urządzeń (co jest podejściem kruchym, bo ciągle pojawiają się nowe urządzenia), zaleca się ustawianie punktów przerwania tam, gdzie **układ strony zaczyna "pękać"** lub wyglądać nieoptymalnie.

Typowe punkty przerwania często odpowiadają orientacyjnym szerokościom dla małych telefonów, dużych telefonów/małych tabletów, tabletów i dużych ekranów, np.:

• ~320px (małe telefony)
• ~480px (większe telefony)
• ~768px (tablety w pionie)
• ~1024px (tablety w poziomie, małe laptopy)
• ~1200px+ (duże ekrany)

Jednak najlepszą praktyką jest **analiza własnej treści i layoutu** i dodawanie breakpointów tam, gdzie są one faktycznie potrzebne.