Jak nie nadużywać media query?
Poznaliśmy już viewport, poznaliśmy media query, ale co zrobić w przypadku dużych projektów? Layouty poszczególnych podstron mogą znacząco się różnić, co może spowodować bardzo dużą ilość breakpointów w media query. Jak więc można ograniczyć ilość breakpointów?
Nie powtarzaj zbędnych deklaracji
Przede wszystkim musisz pamiętać o jednej rzeczy. Przyjrzyjmy się poniższemu fragmentowi:
| 1 2 3 4 5 6 7 8 9101112 | @media(max-width:600px){p{font-size:14px;}}@media(max-width:400px){p{font-size:14px;color:#ff0;}} |
|---|---|
Zauważ, że warunek w pierwszym zapisie media query ma tylko zapis dotyczący maksymalnej szerokości. Nie posiada on minimalnej wartości, więc poniżej600pxnie zostanie on “wyłączony”.
Dzięki temu w drugim media query nie musisz ponownie zapisywać wartości, które zostały dopisane w media query z warunkiem o wyższej wartości. Możesz usunąć linijkę dotyczącą rozmiaru czcionki, a ona zostanie niezmiennie ustawiona na14pxna ekranach o szerokości600pxi poniżej.
Użycie właściwości max-width
Przyjrzyjmy się innemu przypadkowi, który również ograniczy ilość kodu który musimy napisać:
| 12345678 | .container{width:1024px;margin:0auto;}@mediaalland(max-width:1100px){width:95%;} |
|---|---|
Powyższy kod ustala nam szerokość elementu.containerna1024pxi środkuje nam element w poziomie. Mamy więc dostępny kontener, który jest zawsze wyśrodkowany.
Poniżej szerokości ekranu równej1100pxustawiamy szerokość na95%szerokości ekranu. Nie trzeba jednak tego robić. Możemy tu zupełnie pominąć drugie media query. W jaki sposób?
Musimy użyć do tego właściwościmax-width. Powyższy kod możemy więc zapisać w taki sposób:
| 12345 | .container{max-width:1024px;width:95%;margin:0auto;} |
|---|---|
Powyższy kod zadziała podobnie jak poprzednia wersja z media query. Przeglądarka najpierw obliczy ile w pikselach będzie wynosić95%szerokości dla tego elementu. Jeśli ta wartość będzie mniejsza niż1024pxto użyje właśnie jej nadając szerokość elementowi.container. Jeśli natomiast wartość ta będzie większa to przeglądarka ustawi szerokość dokładnie na1024px.
W ten właśnie sposób jedną linijką zastąpiliśmy cały zapis media query. Kod nie tylko będzie zajmował mniej miejsca i ograniczy ilość przesyłanych danych, ale także będzie czytelniejszy dla przyszłych programistów.
Zadanie 1
Twoim zadaniem jest dodanie do elementu.containertakich właściwości CSS, aby nie używać zapisu media query.
Celem jest wyśrodkowany element.container, który będzie miał90%szerokości ekranu, ale maksymalnie1024pxszerokości.
Podsumowanie
W tej lekcji dowiedziałeś się jak ograniczyć ilość zapisów media query. Możesz ograniczyć je przede wszystkim przez odpowiednie użycie właściwościmax-widthi pamiętanie o działaniu warunków w media query. Sposobów na ograniczenie ilości kodu jest pewnie znacznie więcej, ale przedstawiłem tutaj dwa najpopularniejsze. Zapraszam Cię teraz do następnej lekcji w której stworzymy pełnoprawny grid fluid.