Media query to „zmienna” wprowadzona w CSS3. Obecnie spotykana jest ona na każdej stronie typu RWD.
Co znajdziesz w tym wpisie
Jak wygląda użycie @media query?
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 |
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 | Warunki obowiązują w każdej przeglądarce, której szerokość przekracza wartość podaną w zapytaniu. |
max-width | Reguły dotyczą każdej przeglądarki, której szerokość jest poniżej wartości podanej w zapytaniu. |
min-height | Reguły będą obowiązywać w każdej przeglądarce, której wysokość przekroczy wartość podaną w zapytaniu. |
max-height | 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ść. |
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: