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.

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.

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:

1. Kliknij prawy klawisz myszy w dowolnym miejscu na stronie i wybierz Inspect. Uruchomiłeś narzędzie Developer Tools
2. W panelu po lewej kliknij w ikonki urządzeń mobilnych (patrz obrazek)

3. 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

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

Inne przydatne opcje

Kontrolowanie szerokości okna przeglądarki

1. Upewnij się, że w górnym pasku masz opcję Responsive
2. 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

Możesz ręcznie ustawić szerokość testowanego okna. Pola szerokość i wysokość są edytowalne.

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”.

Wskazówka Jeśli nie wiesz, jaką szerokość ma twój telefon, to sieci znajdziesz tabelki z zestawianiem, np. 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)

Testowanie typowych zakresów urządzeń

Szary górny pasek pozwala emulować wygląd strony na typowych szerokościach:

1. Mobile S – 320px
2. Mobile M – 375px
3. Mobile L – 425px
4. Tablet – 768px
5. Laptop S – 1024px
6. 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!