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 (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 |
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
W branży IT jestem już od 2007 roku. W tym czasie zajmowałam się głównie tematyką pozycjonowania i budowy stron internetowych. Hobbistycznie zajmuje się fotografią, podróżami (głównie tymi mikro). Interesuje się mitologią (Nordycką, Grecką i Rzymską) i historią.