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

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

Czas czytania: 3 minut

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

Jak wygląda użycie @media?

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.

OznaczeniePrzeznaczenie
alldla każdego typu urządzeń
auraltylko dla syntezatorów mowy i dźwięku
brailledla urządzeń przeznaczonych dla niewidomych, które umożliwiają czytanie
embosseddla drukarek brailla
handheldbezprzewodowe urządzenia ręczne
printdla podglądu wydruku oraz materiałów, które zostaną wydrukowane
projectiondla prezentacji projektorowych
screendla komputerów z kolorowym ekranem
ttydla dalekopisów, terminali albo przenośnych urządzeń z ograniczonymi możliwościami wyświetlania
tvdla telewizora

źródło: https://webkod.pl/kurs-css/lekcje/dzial-1/css3-media-queries

Powyższe oznaczenia informują przeglądarkę o tym w jaki sposób ma obsłużyć na urządzeniu. W przypadku stron internetowych najczęściej będzie nas interesowała screen.

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:

AtrybutWynik
min-widthWarunki obowiązują w każdej przeglądarce, której szerokość przekracza wartość podaną w zapytaniu.
max-widthReguły dotyczą każdej przeglądarki, której szerokość jest poniżej wartości podanej w zapytaniu.
min-heightReguły będą obowiązywać w każdej przeglądarce, której wysokość przekroczy wartość podaną w zapytaniu.
max-heightWarunki obowiązują w każdej przeglądarce, której wysokość jest poniżej wartości podanej w zapytaniu.
orientation=portraitReguły będą w każdej przeglądarce, której wysokość jest równa szerokości lub większa.
orientation=landscapeReguły obowiązują w każdej przeglądarce, której szerokość jest większa niż wysokość.

https://developers.google.com/web/fundamentals/design-and-ux/responsive?hl=pl

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.

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: