Jak testować media queries w Chrome Developer Tools
Na przykładzie wyjaśniam, jak korzystać z Chrome Developer Tools w dostosowaniu wyglądu strony pod urządzenia mobilne oraz dlaczego pakiet ten jest niezastąpiony w Responsive Web Design i testowaniu media queries.
Problem do rozwiązania
Oto problem, który rozwiążemy za pomocą narzędzi Chrome Developer Tools i media queries.
PrzedPo
Na urządzeniach mobilnych tekst oblewający obrazek ma niewiele miejsca i efekt końcowy wygląda źle. Naprawienie problemu będzie polegało na wyłączeniu opływania obrazka, ale tylko na telefonach.
Wykorzystamy media queries.
Co to są media queries?
Media queries pozwalają na warunkowe zastosowanie reguł CSS. Dzięki media query możesz powiedzieć: użyj tej reguły CSS, tylko jeśli spełniony jest dany warunek, np.szerokość urządzenia jest w podanym zakresie.
Przykład media queries
Wyłącz opływanie obrazka, gdy okno przeglądarki jest mniejsze niż 320px.
Rozwiązanie problemu krok po kroku – media queries w akcji
Filmik pokazuje, jak za pomocą media queries i DevTools z przeglądarki Chrome naprawić problem opisany we wstępie. Narzędzia Chrome’a pozwalają bezpiecznie przetestować rozwiązanie zanim na dobre wprowadzimy zmianę. .
Jak testować media queries w Chrome – przydatne opcje
Podczas gdy na filmiku pokazane jest jak operować narzędziami z Chrome Developer Tools do rozwiązania konkretnego problemu, poniżej znajdziemy ściągę z najprzydatniejszych opcji.
Jak przejść w tryb testowania media queries
W przeglądarce Chrome:
Kliknij prawy klawisz myszy w dowolnym miejscu na stronie i wybierz Inspect. Uruchomiłeś narzędzie Developer Tools
W panelu po lewej kliknij w ikonki urządzeń mobilnych (patrz obrazek)
Jak testować media queries w Chrome – krok 2
Włączenie poglądu media queries
Upewnij się, że tryb mobilny jest aktywny (ikonki powinny mieć kolor niebieski, zobacz obrazek niżej)
W prawym górnym rogu ekranu kliknij na trzy pionowe kropki
Wybierz Show media queries
Jak testować media queries w Chrome – krok 3
Jeśli twoja strona używa media queries, zobaczysz dodatkowe kolorowe paski:
niebieski – pokazuje media queries w połączeniu z max-width
zielony – min-width and max-width (zakres)
pomarańczowy – min-width
Kolorowe paski media queries
Jakie akcje kryją się na kolorowych paskach
Pionowe kreseczki oddzielające odzwierciedlają zakresy zdefiniowane poprzez poszczególne media queries. Można klikać w każdy z nich.
lewy klawisz myszy – dostosuje podgląd strony dla danego zakresu szerokości
prawy klawisz myszy – przeniesie cię do pliku CSS, gdzie zdefiniowano te media queries
Lewy przycisk myszy – sterowanie szerokością okna zgodnie z media queriesPrawy przycisk myszy – przeniesienie do miejsca gdzie zdefiniowano media query dla danego zakresu
Inne przydatne opcje
Kontrolowanie szerokości okna przeglądarki
Upewnij się, że w górnym pasku masz opcję Responsive
W oknie głównym, po prawej zobaczysz pionowe paski. Złap je myszą i zmieniaj szerokość okna. Obserwuj górny pasek – powie ci on na jakiej szerokości jesteś dokładnie
Testowanie wyglądu strony pod dowolną szerokość
Możesz ręcznie ustawić szerokość testowanego okna. Pola szerokość i wysokość są edytowalne.
Ustawienie urządzenia na konkretną szerokość i wysokość
Dodanie własnego urządzenia
Górny pasek pozwala Ci emulować wygląd stron na danym urządzeniu. Jeśli konretny telefon nie pojawia się w liście, możesz go dodać za pomocą przycisku „Edit”.
Dodanie własnego urządzenia – krok 1Dodanie własnego urządzenia – krok 2Dodanie własnego urządzenia – krok 3
Wskazówka Jeśli nie wiesz, jaką szerokość ma twój telefon, to sieci znajdziesz tabelki z zestawianiem, np. www.canbike.org/CSSpixels/
Szerokości urządzeń www.canbike.org/CSSpixels/
Obracenie urządzenia do orientacji poziomej
Na górnym pasku znajdziesz też ikonkę z obracanymi strzałeczkami, która jednym kliknięciem pozwala obrócić testowane urządzenie w orientację poziomą (i vice versa)
Ustawianie urządzenia w orientacji poziomej
Testowanie typowych zakresów urządzeń
Szary górny pasek pozwala emulować wygląd strony na typowych szerokościach:
Mobile S – 320px
Mobile M – 375px
Mobile L – 425px
Tablet – 768px
Laptop S – 1024px
Laptop L – 1440px
Testowanie typowych zakresów urządzeń
Jeśli na Twojej stronie nie ma jeszcze w ogóle media queries i chcesz je dodać, to możesz zacząć od testowania wyglądu strony właśnie w tych zakresach.
Twoja ulubiona opcja?
Która z opcji ci się podoba najbardziej? Jak Ty testujesz stronę pod urządzenia mobilne? Może używasz zupełnie innych narzędzi?
Aga Bury, autor wpisu
Dla mnie osobiście największą zaletą przeglądarki Chrome’a i jego narzędzi do testów urządzeń mobilnych jest możliwość testowania media queries „na sucho”.
Długo zachodziłam w głowę, jak w ogóle dodawać nowe media queries w Inspektorze. A więc na koniec podsumuję:
Inspect -> Ikonki mobilne po lewej -> Trzy kropki po prawej na górze -> Show media queries -> Kliknij na wybranym zakresie (pomarańczowego lub niebieskiego paska) prawym przyciskim myszy -> wybierz Reveal in source code -> przejdź do źródła i dodaj nową regułę.
Dobry temat dla deweloperów. 😉