Media queries – podstawy i zaawansowane techniki

Media queries to kluczowe narzędzie w CSS, dzięki któremu możemy tworzyć responsywne i elastyczne projekty. Pozwalają one na warunkowe stosowanie stylów w zależności od właściwości urządzeń (takich jak szerokość ekranu, jego orientacja czy rozdzielczość).

Podstawy Media Queries

Podstawowa składnia media queries polega na określeniu warunku (np. min-width lub max-width), dla którego mają obowiązywać wybrane style

/*
(min-width: 768px) oznacza, że reguły wewnątrz tego zapytania zostaną zastosowane tylko wtedy, gdy szerokość ekranu jest większa lub równa 768px.
 */

@media (min-width: 768px) {
  .container {
    width: 70%;
    margin: 0 auto;
  }
}

Zaawansowane techniki

Stosowanie wielu warunków

Media queries mogą zawierać wiele warunków, dzięki czemu można bardziej precyzyjnie dostosować style.

@media (min-width: 768px) and (max-width: 1024px) {
  /* Te style obowiązują tylko dla szerokości ekranu między 768px a 1024px */
  .sidebar {
    width: 30%;
  }
}

Media queries wbudowane w definicje @import

Możesz także importować plik CSS tylko dla konkretnych warunków:

@import url("tablet.css") screen and (min-width: 768px) and (max-width: 1024px);

Użycie preprocesorów i frameworków

Frameworki CSS (np. Bootstrap) korzystają z ustalonych „breakpointów” i gotowych mixinów, co przyspiesza tworzenie responsywnych układów. Preprocesory (np. Sass, Less) oferują jeszcze bardziej zaawansowane podejście do media queries, pozwalając używać zmiennych i funkcji.

Media Queries dla wysokiej rozdzielczości

Aby dostosować styl np. do ekranów Retina:

@media only screen and (-webkit-min-device-pixel-ratio: 2),
       only screen and (min-resolution: 192dpi) {
  /* Style dla ekranów o wysokiej gęstości pikseli */
  .logo {
    background-image: url("[email protected]");
    background-size: contain;
  }
}

  See the Pen 
  Untitled by EE-Informatyk.pl (@eeinformatyk)
  on CodePen.

Podsumowanie

Media queries stanowią fundament responsywnego projektowania – umożliwiają dopasowanie layoutu, rozmiaru czcionek, obrazów oraz innych elementów do najróżniejszych ekranów i urządzeń. Dzięki nim tworzymy strony, które pozostają użyteczne i estetyczne niezależnie od tego, jak i gdzie zostaną wyświetlone. Zarówno podstawowe zapytania (z min-width i max-width), jak i bardziej zaawansowane warunki (np. orientation czy min-resolution) pozwalają dostosować projekt do szerokiego spektrum urządzeń.