Podstawy media query i viewport
Wiesz już czym jest Responsive Web Design, pojawia się więc pytanie, jak zacząć wdrożenie responsywności do dowolnego projektu?
Znacznik viewport
Na początku musisz zadbać oviewport. Znacznik ten określa sposób wyświetlania strony na urządzeniu mobilnym. Pozwala określić m. in. takie parametry jak minimalne i maksymalne przybliżenie oraz szerokość strony.
Bardzo ważną rzeczą jest możliwość przybliżenia strony. Znaczna część programistów wyłącza taką możliwość w viewporcie. Zdania na ten temat są mocno podzielone. Osobiście uważam, że nie powinno się zabraniać użytkowniki przybliżenia strony, bo jeśli ma taką potrzebę to dlaczego by mu tego zabraniać. Oczywiste jest przecież, że wtedy layout strony może wyglądać inaczej niż byśmy tego pragnęli, ale takie są skutki przybliżenia każdej strony. Musimy mieć na uwadze także osoby ze słabszym wzrokiem, które takiego przybliżenia będą potrzebowały. Nie powinniśmy przecież wykluczać danej grupy użytkowników z korzystania z naszej strony. Programistów tak naprawdę nie kosztuje to wiele, a może pomóc niektórym osobom.
Zatem jaki powinien być prawidłowy zapisviewport?
| 1 | <metaname="viewport"content="width=device-width, initial-scale=1.0, minimum-scale=1.0, user-scalable=yes"> |
|---|---|
Dzięki powyższemu zapisowi strona otrzymała możliwość dodania responsywności, ale w pełni responsywna jeszcze nie jest. Zanim do tego przejdziemy musisz pamiętać o jednej rzeczy. Praktyka wskazuje na to, że zawsze powinieneś przygotowywać layout, który wyświetli się poprawnie na urządzeniu o szerokości320px i więcej.
Pamiętaj również o jeszcze jednym aspekcie. Rozdzielczość ekranu nie jest równa rozdzielczości, którą wpisujesz w media query. To by oznaczało, że layout który wyświetli się na komputerze powinien wyświetlić się również np. na iPhonie z ekranem Retina, ponieważ rozdzielczości są podobne. Dochodzi jednak do tego jeszcze jedna zmienna zwana „device pixel ratio”, dzięki której rozdzielczość ekranu jest skalowana i urządzenia które mają taki sam rozmiar ekranu powinny wyświetlać mniej więcej taki sam layout, niezależnie od swojej rozdzielczości. Dzieje się tak ponieważ do rozdzielczości “dokładana” jest właśnie zmienna o której wspomniałem przed chwilą. Device pixel ratio określa nam gęstość umieszczenia pikseli na ekranie, dzięki czemu mamy już pełny obraz sytuacji i szczegółowo opisany ekran danego urządzenia.
Media query
Jak więc wprowadzić responsywność do layoutu? Wykonuje się to poprzez zapis zwanymedia query. Podstawowa składnia wygląda tak jak poniżej:
| 123 | @media(max-width:600px){...} |
|---|---|
Wpis zaczynamy od@media, po czym wypisujemy warunek, który musi zostać spełniony, aby dany kod zadziałał. W powyższym przykładzie kod znajdujący się w nawiasach{ }zostanie użyty tylko, gdy szerokość widoku jest mniejsza lub równa600px.
Możliwych warunków jest jednak bardzo wiele. W jednym media query możesz np. łączyć wiele warunków:
| 123 | @media(min-width:300px)and(max-width:600px){...} |
|---|---|
Aby powyższe media query zadziałało muszą zostać spełnione oba warunki, czyli szerokość ekranu musi posiadać wartość pomiędzy300a600pikseli. Możesz także zapisać warunek tak, aby tylko jeden z nich musiał zostać spełniony, rozdzielając je przecinkiem:
| 123 | @media(min-width:300px),(max-width:600px){...} |
|---|---|
W łatwy sposób możesz także wybrać grupę urządzeń, których ma dotyczyć dany styl. Zazwyczaj jednak używa się wartościall, gdyż rzadko rozdzielamy style w zależności czy urządzenie jest smartfonem, laptopem czy telewizorem.
Jedynym wyjątkiem jest tutajprint. Możemy dzięki niemu ustalić style, które będą miały zastosowanie, gdy użytkownik będzie chciał Twoją stronę wydrukować:
| 123 | @mediaprint{...} |
|---|---|
Zazwyczaj jednak nie powinieneś się przejmować typem media query i używaćall. W media query możesz również wykryć czy przeglądarka użytkownika wspiera dany feature, czyli nową funkcję czy usługę. Nie będziemy jednak głębiej poruszać tego tematu w kursie, ponieważ nie potrzebujemy go w tym momencie.
Jeśli jesteś zainteresowany tematem to odsyłam Cię do dokumentacji fundacji mozilla:Using_media_queries. Tam znajdziesz wszystkie potrzebne informacje i pogłębisz swoją wiedzę. Pamiętaj jednak o pewnej istotnej kwestii. Media query wykrywające obsługę feature’a nie działa w przeglądarkach Internet Explorer.
Jeśli chcesz zobaczyć jak będzie wyglądała Twoja strona na ekranie o mniejszej szerokości, możesz po prostu zmniejszyć okno przeglądarki.
Kod, który piszesz w tym kursie jest na bieżąco wyświetlany w części “Podgląd”. Jest to specjalny tryb, w którym szerokością braną pod uwagę przez media query jest szerokość sekcji “Podgląd” a nie szerokość całego ekranu.
Zadanie 1
Twoim zadaniem jest utworzenie prostego media query dla elementu<p>. Wielkość czcionki powinna zostać ustalona na16px, gdy rozmiar ekranu będzie mniejszy lub równy800px.
Podsumowanie
W tej lekcji nauczyłeś się jak poprawnie ustawić viewport oraz jak dobrze korzystać z media query. Zapraszam Cię na następną lekcję w której dowiesz się jak nie przesadzić i nie utworzyć zbyt dużej ilości breakpointów w media query.