Kwalifikacje w Zawodzie - Testy zawodowe online | Egzaminy Zawodowe

KWALIFIKACJA PGF7 - TEST WIEDZY NR 10



PYTANIE NR 35.
Przyjrzyj się poniższemu fragmentowi kodu CSS, który jest używany do stylizacji elementów reklamy dla urządzeń mobilnych: 
@media (max-width: 600px) {
  .container {
    width: 100%;
  }
}
Co robi ten kod?
A.
B.
C.
D.
Wyjaśnienie poprawnej odpowiedzi:
Reguła @media (max-width: 600px) włącza style tylko wtedy, gdy szerokość widoku ma 600px lub mniej. W takim przypadku dla elementów z klasą .container ustawiane jest width: 100%, czyli kontener rozciąga się na całą dostępną szerokość na mniejszych ekranach.

Pełne wyjaśnienie:

Pokazany fragment to zapytanie medialne CSS (media query). Część @media (max-width: 600px) oznacza warunek: zastosuj poniższe reguły tylko wtedy, gdy szerokość obszaru wyświetlania (najczęściej rozumiana jako szerokość widoku/viewport) jest równa 600 pikseli lub mniejsza.

Wewnątrz bloku znajduje się reguła dla selektora klasy .container. Właściwość width: 100% ustawia szerokość elementu na 100% szerokości jego kontenera nadrzędnego. W praktyce w układach mobilnych często daje to efekt "rozciągnięcia" sekcji na pełną szerokość dostępnego miejsca, co poprawia czytelność i dopasowanie kreacji reklamowej na telefonach.

Dlaczego pozostałe odpowiedzi są błędne?

  • Stwierdzenia o ustawieniu szerokości na 600px są nieprawidłowe, bo kod nie przypisuje wartości 600px do width; liczba 600px występuje wyłącznie jako próg warunku w @media.
  • Teza, że styl działa tylko dla ekranu o szerokości dokładnie 600px, wynika z błędnego, "punktowego" odczytania warunku. max-width obejmuje zakres: 600px oraz wszystkie wartości mniejsze (np. 599px, 480px, 375px).
  • Odpowiedź mówiąca o "urządzeniach z ekranem o szerokości 100%" jest nielogiczna w języku CSS: 100% to wartość względna właściwości, a nie rozmiar ekranu w pikselach.

Wskazówka egzaminacyjna: w media queries słowo max czytaj jako "maksymalnie". Gdy widzisz max-width: 600px, myśl: "dla 600px i w dół".

Dodatkowe pytania

Dodatkowe pytania (FAQ):
Co to jest reguła @media w CSS?
Reguła @media to mechanizm CSS, który pozwala stosować style warunkowo, np. zależnie od szerokości ekranu. Dzięki temu ta sama kreacja (np. reklama HTML) może wyglądać inaczej na telefonie i inaczej na komputerze.
Jak działa warunek max-width: 600px w CSS?
max-width: 600px oznacza, że style zadziałają, gdy szerokość widoku ma 600px lub mniej. To typowy "breakpoint" dla mniejszych ekranów. Nie oznacza ustawienia elementu na 600px, tylko próg, od którego włączają się reguły.
Dlaczego w reklamach stosuje się width: 100% dla kontenera?
width: 100% pomaga dopasować układ do wąskiego ekranu, żeby element nie "uciekał" poza widok i nie powodował poziomego przewijania. W reklamach mobilnych poprawia to czytelność treści i klikalność przycisków.
Czy max-width dotyczy urządzenia czy okna przeglądarki?
W praktyce zapytanie medialne odnosi się do warunków środowiska wyświetlania, zwykle szerokości viewportu (obszaru strony w przeglądarce). Na komputerze zadziała też po zwężeniu okna, a na telefonie zależy od szerokości widoku urządzenia i ustawień strony.
Jakie są najczęstsze błędy w czytaniu media queries?
Najczęściej myli się max-width z min-width (odwrócenie zakresu), bierze liczbę z warunku jako wartość właściwości (np. myśli, że width=600px) oraz błędnie zakłada, że reguła działa tylko dla dokładnie jednej szerokości.
Jaka jest różnica między max-width a min-width?
max-width oznacza "do tej wartości włącznie" (np. 600px i mniej), a min-width oznacza "od tej wartości w górę" (np. 600px i więcej). Ta różnica decyduje, czy projektujesz podejście "mobile-first" czy "desktop-first".
Kiedy używać breakpointu 600px w projekcie reklamy?
600px bywa używane jako umowny próg dla mniejszych ekranów (telefony i część małych tabletów). W praktyce dobiera się breakpointy do layoutu kreacji: gdy elementy zaczynają się ściskać, łamać lub tracić czytelność, dodaje się reguły @media.
Jak sprawdzić w przeglądarce, czy @media działa poprawnie?
Użyj narzędzi deweloperskich i trybu responsywnego (symulacja urządzeń), a potem zmieniaj szerokość okna. Obserwuj, czy po zejściu do 600px i niżej aktywuje się width: 100% dla .container oraz czy nie pojawia się poziomy scroll.
Czy width: 100% zawsze oznacza pełną szerokość ekranu?
Nie zawsze. 100% oznacza 100% szerokości elementu nadrzędnego, a nie automatycznie całego ekranu. Jeśli rodzic ma np. ograniczenie szerokości lub marginesy/padding, to element będzie dopasowany do tych ograniczeń.
Jakie inne właściwości często zmienia się w CSS dla mobilnych reklam?
Poza szerokością często zmienia się font-size (czytelność), padding/margins (odstępy), układ w flex lub grid, a także rozmiary obrazów. Celem jest prostszy layout i wygodne klikanie CTA na małym ekranie.
info

Statystycznie 61% uczniów zna prawidłową odpowiedź. średnie

Według specjalistów z branży: "Reguła @media (max-width: 600px) włącza style tylko wtedy, gdy szerokość widoku ma 600px lub mniej."

Źródła:

  • MDN Web Docs: "@media" (CSS at-rule) – https://developer.mozilla.org/en-US/docs/Web/CSS/@media - accessed 2026-02-27
  • MDN Web Docs: "Media queries" – https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries - accessed 2026-02-27
  • MDN Web Docs: "width" (CSS property) – https://developer.mozilla.org/en-US/docs/Web/CSS/width - accessed 2026-02-27

Materiały:

  • Dokumentacja MDN o @media (media queries) i przykładach użycia
  • Materiały o podstawach RWD (breakpointy, viewport, mobile-first)
  • Ćwiczenia praktyczne: tworzenie prostych layoutów i ich zachowania dla różnych szerokości ekranu
Zobacz też:

Aktualizacja pytania: 31.03.2026



Aktualizacja pytania: 31.03.2026
📡 Brak połączenia internetowego