Jak używać @media query? Kilka przydatnych przykładów. [CSS3]

Czas czytania: 4 minut

Media query to „zmienna” wprowadzona w CSS3. Obecnie spotykana jest ona na każdej stronie typu RWD.

Jak wygląda użycie @media query (CSS)?

Praktycznie bez @media query RWD by nie istniało. Czasami stosuje się tylko określenie @media bez dodatku query (zapytanie, pytanie).

przykład:

@media only screen and (max-width: 768px) { 
/* For mobile phones: */ 
  [class*="col-"] { 
    width: 100%; 
   } 
}

Do czego służy @media?

W sumie to już powinniście się domyślać. Media to swego rodzaju zapytanie – warunek informujący przeglądarkę o tym jaki kod CSS ma użyć w konkretnym przypadku np. inny dla:

• komputera stacjonarnego
• laptopa
• tabletu
• komórki

Jakie wartości może przyjmować @media?

Praktycznie dowolne kwestią jedynie jest dobranie odpowiednich warunków określających. Na początek pokażę wam tabelę z przykładowymi oznaczeniami.

Oznaczenie	Przeznaczenie
all	dla każdego typu urządzeń
aural	tylko dla syntezatorów mowy i dźwięku
braille	dla urządzeń przeznaczonych dla niewidomych, które umożliwiają czytanie
embossed	dla drukarek brailla
handheld	bezprzewodowe urządzenia ręczne
print	dla podglądu wydruku oraz materiałów, które zostaną wydrukowane
projection	dla prezentacji projektorowych
screen	dla komputerów z kolorowym ekranem
tty	dla dalekopisów, terminali albo przenośnych urządzeń z ograniczonymi możliwościami wyświetlania
tv	dla telewizora

Powyższe oznaczenia informują przeglądarkę o tym w jaki sposób ma obsłużyć witrynę na urządzeniu. W przypadku stron internetowych najczęściej będzie nas interesował screen. Zmienna ta bowiem dotyczy urządzeń takich jak monitory.

Przykładowe zastosowania

W przykładach będziemy operować głównie na screen gdyż przeznaczony jest on dla ekranów komputerów i urządzeń mobilnych.

Zmiana koloru tła w przypadku zmiany szerokości

Poniższy kod zmieni kolor tła w momencie kiedy ulegnie zmianie jego szerokość.

body {
  background-color: lightpink; /* podstawowy kolor */
}
@media screen and (min-width: 400px) { /* jeśli szerokość jest większa od 400px  */
  body {
    background-color: lightgreen;
  }
}

@media screen and (min-width: 800px) { /* jeśli szerokość jest większa od 800px */
  body {
    background-color: lightblue;
  }
}

W przypadku powyższego kodu do momentu, w którym strona osiągnie szerokość 800px jej kolor będzie = lightblue. Po osiągnięciu tej szerokości kolor zmieni się na  lightgreen, aż nie będzie mniejsza niż 400px. W tedy kolor lightpink.

Przedziały szerokościowe

W tym wypadku kolor tła będzie lightpink  poza momentem kiedy szerokość strony będzie w przedziale 800px – 400px.

body {
background-color: lightpink; /* podstawowy kolor */
}
@media screen and (max-width: 800px) and (min-width: 400px) { 
/* jeśli szerokość jest mniejsza od 800px i większa od 400px */ 
 body{
    background-color: lightblue; 
  } 
}

Tylko 1 szerokość – device-width

Innym typem warunku jaki możemy utworzyć jest device-width. W przeciwieństwie do max-width lub min-width ten warunek zostanie spełniony w momencie kiedy urządzenie będzie miało dokładnie taką szerokość. W każdym innym przypadku @media nie zadziała.

Przykład:

body {
 background-color: pink; 
} 
@media all and (device-width:900px) {
 body  {
   background-color:blue; 
 } 
}

W powyższym przykładzie tło będzie miało kolor 'blue’ tylko w sytuacji kiedy szerokość uradzenia będzie wynosiła równe 900px;

Kolejny przykład:

@media all and (min-device-width:900px) {
    body {
     background-color:blue;
   } 
}

Reguła @media all and (min-device-width:900px) działa podobnie do @media screen and (min-width: 900px). Czyli informuję przeglądarkę internetową, że tło strony będzie niebieskie w sytuacji kiedy szerokość urządzenie nie będzie mniejsza niż 900 pikseli. W każdym innym przypadku będą stosowane inne zasady. W przypadku jednak gdy nic innego nie zadeklarowaliśmy tło będzie białe.

Kolejny przykład:

@media all and (max-device-width:900px) {
  body {
    background-color:pink;
  }
}

Reguła @media all and (max-device-width:900px) informuje przeglądarkę internetową, że kolor tła będzie „pink” w sytuacji gdy szerokość urządzenia nie będzie mniejsza niż 900px.

Atrybuty przydatne do tworzenia warunków

Inne atrybuty, które warto znać to:

Atrybut	Wynik
min-width	Minimalna szerokość. Warunki obowiązują w każdej przeglądarce, której szerokość przekracza wartość podaną w zapytaniu.
max-width	Maksymalna szerokość. Reguły dotyczą każdej przeglądarki, której szerokość jest poniżej wartości podanej w zapytaniu.
min-height	Minimalna wysokość. Reguły będą obowiązywać w każdej przeglądarce, której wysokość przekroczy wartość podaną w zapytaniu.
max-height	Maksymalna wysokość. Warunki obowiązują w każdej przeglądarce, której wysokość jest poniżej wartości podanej w zapytaniu.
orientation=portrait	Reguły będą w każdej przeglądarce, której wysokość jest równa szerokości lub większa.
orientation=landscape	Reguły obowiązują w każdej przeglądarce, której szerokość jest większa niż wysokość.

Działanie w @media – not, only i and

W warunku jaki stawiamy by poprawnie określić typ oraz rozmiar urządzenia znajdują się również takie atrybuty jak not, only i and. Na język Polski można by je przetłumaczyć jako nie, tylko i oraz.

• not: odwraca znaczenie całego zapytania o media (czyli zadziała na wszystko poza tym co napisaliśmy).
• only: uniemożliwia starszym przeglądarkom (bez wpływu na nowe), które nie obsługują zapytań o media z funkcjami multimedialnymi, stosowanie określonych stylów.
• and: słowo kluczowe and łączy funkcję multimedialną z typem multimediów lub innymi funkcjami medialnymi.

Wszystkie te operatory są opcjonalne czyli w praktyce nie musimy z nich korzystać. Mogą się jednak czasem okazać bardzo przydatne.

Dlaczego @media nie działa na mojej stronie?

Samo dodanie warunków @media nie sprawi, że nasza strona będzie się ładnie skalować. Trzeba na stronie pomiędzy znacznikami <head></head> dodać odpowiednią dyrektywę:

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

lub prościej

<meta name="viewport" content="width=device-width" />

Dzięki, której przeglądarka będzie wiedział, że ma zwracać uwagę na szerokość okna w przypadku wyświetlania strony.

Czy efekt @media queries możemy uzyskać w HTML?

Niestety nie! HTML służy jedynie do budowy szablonów, struktur. Dopiero CSS nadaje im właściwości i określa sposób zachowania.

Na co powiliśmy zwrócić uwagę!

Na pewno nie powiliśmy używać zagnieżdżonych warunków czyli warunku w warunku. Nie każda przeglądarka sobie z nimi radzi – w efekcie pominie taką regułę. Dlatego trzeba pamiętać, żeby każdy warunek był osobno.

W przypadku kodu z zastosowaniem @media zasady są analogiczne jak dla całej reszty kodu. Czyli zachowana jest kaskadować. Warunki muszą więc być ustawione w odpowiedniej kolejności. Zaczynamy więc od normalnego kodu potem duże szerokości i stopniowo przechodzimy do mniszych.

Dokładna lokalizacja warunku uzależniona jest od metody pisania kodu jaką stosujemy. Oraz od tego jakiego preprocesora używamy (sass czy less).

źródła:

• https://developers.google.com/web/fundamentals/design-and-ux/responsive?hl=pl
• https://webkod.pl/kurs-css/lekcje/dzial-1/css3-media-queries