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.

Problem na urządzeniu mobilnym, który rozwiążemy za pomocą media queries — Przed

Po - jak problem zostanie rozwiązany za pomocą media queries — Po

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.

Co to są media queries. Przykład

Więcej przykłądów na www.w3.org/TR/css3-mediaqueries/#media0

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 — Jak testować media queries w Chrome – krok 2

Włączenie poglądu media queries
1. Upewnij się, że tryb mobilny jest aktywny (ikonki powinny mieć kolor niebieski, zobacz obrazek niżej)
2. W prawym górnym rogu ekranu kliknij na trzy pionowe kropki
3. Wybierz Show media queries

Jak testować media queries w Chrome - krok 3 — 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

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 queries — Lewy przycisk myszy – sterowanie szerokością okna zgodnie z media queries

Prawy przycisk myszy - przeniesienie do miejsca gdzie zdefiniowano media query — Prawy 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 2 — Dodanie własnego urządzenia – krok 2

Dodanie własnego urządzenia - krok 3 — Dodanie 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

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?

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łę.

Na filmiku jest to pokazane w minucie 6:09

Jestem ciekawa, jak Ty testujesz media queries i Responsive Web Design. Nie bądź zgred, podziel się wiedzą z innymi!