![Jak używać @media query? Kilka przydatnych przykładów. [CSS3]](https://aurainweb.pl/wp-content/uploads/2019/10/mobile-814x250.jpg "Jak używać @media query? Kilka przydatnych przykładów. [CSS3] 1")
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 danego oznaczenia, wartości |
|---|---|
| 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: