Media Queries

Media queries (pol. zapytania mediów) to mechanizm dostępny w CSS, który umożliwia stosowanie stylów w zależności od właściwości środowiska wyświetlania, takich jak szerokość i wysokość okna przeglądarki, rozdzielczość ekranu, orientacja urządzenia czy typ języka. Dzięki media queries możliwe jest tworzenie stron responsywnych, które dostosowują się automatycznie do różnorodnych urządzeń – od telefonów komórkowych po monitory stacjonarne.

Historia

Idea selektywnego stosowania stylów w zależności od kontekstu pojawiła się po raz pierwszy w specyfikacji W3C w 2010 roku w ramach CSS3. W 2012 roku większość nowoczesnych przeglądarek (m.in. Chrome, Firefox, Safari, Internet Explorer 9) zaczęła w pełni obsługiwać media queries, co przyspieszyło ich popularyzację w praktyce projektowej.

Podstawowa składnia

Media queries definiuje się za pomocą reguły @media w arkuszu stylów:

@media (warunek) {
    selektor {
        deklaracja;
    }
}

Przykład adaptujący układ do ekranów o szerokości nie większej niż 600 px:

@media (max-width: 600px) {
    .menu {
        display: none;
    }
}

Typy mediów i cechy

Media queries mogą odnosić się do:

• typów mediów – określają, do jakiego środowiska ma zastosowanie reguła: all, print, screen, speech itp.
• cech mediów (media features) – szczegółowe właściwości, np.:
  • width i height – szerokość i wysokość obszaru renderowania.
  • min-width / max-width – graniczne szerokości.
  • orientation – portrait lub landscape.
  • resolution – rozdzielczość w dppx, dpcm lub dpi.
  • prefers-color-scheme – preferencja ciemnego lub jasnego schematu kolorów.
  • pointer oraz hover – zdolność wskaźnika i możliwość najechania.

Składanie zapytań

Wiele warunków można łączyć przy użyciu operatorów logicznych and, or (zapisywany jako przecinek) oraz not:

@media screen and (min-width: 768px) and (orientation: landscape) {
    /* style dla szerokich ekranów w orientacji poziomej */
}

Przykładowe zastosowania

• Układ siatki – zmiana liczby kolumn w zależności od szerokości okna:

  @media (min-width: 1024px) {
      .grid { grid-template-columns: repeat(4, 1fr); }
  }
  @media (max-width: 1023px) {
      .grid { grid-template-columns: repeat(2, 1fr); }
  }
  

• Obrazy adaptacyjne – wyświetlanie obrazów o wyższej rozdzielczości na ekranach Retina:

  @media (min-resolution: 2dppx) {
      .logo { background-image: url('logo@2x.png'); }
  }
  

• Tematy kolorystyczne – automatyczne przełączanie się na tryb ciemny:

  @media (prefers-color-scheme: dark) {
      body { background: #111; color: #eee; }
  }
  

Najlepsze praktyki

1. Mobile‑first – najpierw definiujemy style dla najmniejszych ekranów, a potem rozszerzamy je za pomocą zapytań min-width.
2. Unikanie nadmiaru – nie tworzyć zbyt wielu punktów przełamania; starannie dobierać wartości, aby zachować płynność zmian.
3. Wykorzystanie zmiennych CSS – definiowanie wartości w :root i używanie ich w media queries ułatwia utrzymanie kodu.
4. Testowanie – sprawdzać efekty na rzeczywistych urządzeniach oraz w narzędziach deweloperskich przeglądarek.

Obsługa przeglądarek

Większość współczesnych przeglądarek, w tym Chrome, Firefox, Safari, Edge oraz Opera, obsługuje media queries od wersji 2009 roku. Starsze wersje Internet Explorer (IE 8 i niżej) nie wspierają tego mechanizmu.

Związane pojęcia

• Responsive Web Design
• CSS
• HTML
• JavaScript – często używany w połączeniu z media queries do dynamicznej zmiany klas.
• Flexbox i CSS Grid Layout – techniki układu wykorzystywane razem z media queries.

Bibliografia

Specyfikacje i dokumentacje dostępne w repozytoriach W3C oraz artykuły techniczne publikowane od 2010 roku.