Media queries

Co to są media queries?

Media queries to mechanizm CSS pozwalający stosować różne style w zależności od cech urządzenia lub okna przeglądarki, np. szerokości ekranu, orientacji ekranu albo rozdzielczości.

Są jednym z podstawowych narzędzi wykorzystywanych w Responsive Web Design, ponieważ umożliwiają zmianę wyglądu strony na komputerze, tablecie i smartfonie bez tworzenia osobnych wersji witryny.

Do czego służą?

Media queries pozwalają m.in.:

• zmieniać układ kolumn na mniejszych ekranach,
• powiększać lub zmniejszać tekst,
• ukrywać mniej istotne elementy,
• dostosowywać menu do ekranów dotykowych,
• zmieniać marginesy, odstępy i szerokości bloków.

Przykład

body {
  font-size: 18px;
}

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

  .layout {
    display: block;
  }
}

Powyższy kod oznacza, że dla ekranów o szerokości maksymalnie 600 pikseli zostaną zastosowane inne reguły CSS.

Przykładowe warunki

• max-width: 768px — style dla ekranów nie szerszych niż 768 px,
• min-width: 1024px — style dla ekranów od 1024 px wzwyż,
• orientation: landscape — style dla orientacji poziomej.

Znaczenie egzaminacyjne

Jeśli pytanie dotyczy strony dostosowującej się do różnych urządzeń i rozdzielczości, należy kojarzyć to z RWD oraz technikami CSS, szczególnie z media queries.