ZAWODNIK

Strony responsywne: viewport, @media, jednostki względne, obrazy

INF.03 · teoria
autor: redakcja · 08.09.2026
Strona responsywna w praktyce: znacznik viewport, reguła @media z przedziałem szerokości, jednostki względne, elastyczne obrazy oraz przestawienie układu sklepu na jedną kolumnę i test w trybie urządzenia. Lekcja 4.8 kursu INF.03.

[ INF.03: PYTANIA Z TEGO DZIAŁU ]

Przejrzyj pytania: cssĆwicz dział: css
Strona re­spon­syw­na (responsive web design, RWD) to strona, której układ do­pa­so­wu­je się do sze­ro­ko­ści ekranu, więc ten sam plik HTML czyta się wy­god­nie i na mo­ni­to­rze, i na te­le­fo­nie, bez osob­nej wersji mo­bil­nej. W części pi­sem­nej wraca py­ta­nie o regułę dla ekra­nów o sze­ro­ko­ści od 600 px do 800 px oraz o znacz­nik <meta> usta­wia­ją­cy widok. W części prak­tycz­nej lista „innych zadań prak­tycz­nych" w in­for­ma­to­rze CKE wy­mie­nia wprost „wy­ko­rzy­sta­nia reguły @media w celu two­rze­nia stron re­spon­syw­nych", a pod­sta­wa pro­gra­mo­wa każe jesz­cze osobno prze­te­sto­wać re­spon­syw­ność go­to­wej wi­try­ny.

Trzy filary strony re­spon­syw­nej

Re­spon­syw­ność stoi na trzech me­cha­ni­zmach naraz: płyn­nej siatce, ela­stycz­nych ob­ra­zach i za­py­ta­niach o media. Za­bra­nie jed­ne­go psuje efekt dwóch po­zo­sta­łych, bo zdję­cie o stałej sze­ro­ko­ści 800 px ro­ze­pchnie nawet po­praw­nie po­li­czo­ne ko­lum­ny.
  • ›
    Płynna siatka (fluid grid): sze­ro­ko­ści bloków podane w pro­cen­tach za­miast w pik­se­lach, do tego max-width w pik­se­lach jako gra­ni­ca, żeby na sze­ro­kim mo­ni­to­rze wiersz tekstu nie cią­gnął się przez cały ekran. Panel boczny sklepu ma 30 pro­cent, blok główny 70 pro­cent, więc obie ko­lum­ny kurczą się razem z oknem.
  • ›
    Ela­stycz­ne obrazy: max-width: 100% i height: auto, czyli obraz nigdy szer­szy niż blok, w którym stoi.
  • ›
    Za­py­ta­nia o media: reguła @media, która włącza inne war­to­ści wła­ści­wo­ści do­pie­ro od pewnej sze­ro­ko­ści ekranu.
aside { width: 30%; } main { width: 70%; } img { max-width: 100%; height: auto; }
max-width: 100% mówi „nigdy szer­szy niż rodzic", a height: auto pil­nu­je pro­por­cji, żeby zmniej­szo­ny obraz nie wy­szedł spłasz­czo­ny. W banku pytań to od­po­wiedź na py­ta­nie, jak spra­wić, by obraz sam ska­lo­wał się do roz­mia­ru ekranu: sze­ro­kość w war­to­ściach pro­cen­to­wych, nie oba wy­mia­ry w pik­se­lach.

Znacz­nik viewport

viewport (obszar widoku) to pro­sto­kąt, w którym prze­glą­dar­ka układa stronę, zanim pokaże ją na ekra­nie. Te­le­fon bez usta­wie­nia widoku za­kła­da, że strona była pisana na mo­ni­tor: układa ją na uda­wa­nej sze­ro­ko­ści około 980 px, a potem po­mniej­sza całość do sze­ro­ko­ści wy­świe­tla­cza. Efekt to mi­kro­sko­pij­ny tekst i po­więk­sza­nie pal­ca­mi. Gorsze jest to, czego nie widać od razu: reguły @media do­sta­ją wtedy sze­ro­kość 980 px, więc układ dla te­le­fo­nu w ogóle się nie włączy.
<meta name="viewport" content="width=device-width, initial-scale=1">
Znacz­nik stoi w sekcji head, obok ko­do­wa­nia znaków i tytułu, czyli tam, gdzie opi­su­je go lekcja o szkie­le­cie do­ku­men­tu. width=device-width usta­wia sze­ro­kość widoku na sze­ro­kość urzą­dze­nia, a initial-scale=1 blo­ku­je po­cząt­ko­we po­mniej­sze­nie.
Pu­łap­ka: bez znacz­ni­ka viewport reguły @media na te­le­fo­nie nie za­dzia­ła­ją, bo prze­glą­dar­ka podaje im sze­ro­kość uda­wa­ne­go ekranu, a nie praw­dzi­we­go.

Reguła @media

Za­py­ta­nie o media (media query) to wa­ru­nek, po którym prze­glą­dar­ka włącza albo pomija całą grupę reguł CSS. Wa­ru­nek do­ty­czy naj­czę­ściej sze­ro­ko­ści okna, ale bywa też typem urzą­dze­nia albo orien­ta­cją ekranu.
@media screen and (min-width: 600px) and (max-width: 800px) { /* style css */ }
Tak wy­glą­da reguła dla ekra­nów o sze­ro­ko­ści od 600 px do 800 px, czyli do­kład­nie to, o co pyta bank. max-width znaczy „do tej sze­ro­ko­ści włącz­nie", min-width znaczy „od tej sze­ro­ko­ści w górę", a wa­run­ki łączy się słowem and. Przed wa­run­ka­mi stoi typ mediów: screen (ekran), print (druk) albo all (wszyst­kie); po­mi­nię­ty typ znaczy all. Wa­ru­nek orientation: landscape (orien­ta­cja po­zio­ma) łapie te­le­fon ob­ró­co­ny na bok, a print służy do przy­go­to­wa­nia wersji do druku: menu i re­kla­my zni­ka­ją, zo­sta­je sama treść.
@media print { nav { display: none; } }
Punkty, w któ­rych układ się zmie­nia, to punkty prze­ła­ma­nia (breakpoints). Typowe war­to­ści w ar­ku­szach i sza­blo­nach to 600, 768, 992 i 1200 px, bo od­po­wia­da­ją te­le­fo­no­wi, ta­ble­to­wi, małemu lap­to­po­wi i mo­ni­to­ro­wi. Po­dej­ście „mobile first" (naj­pierw te­le­fon) za­czy­na od stylu dla wą­skie­go ekranu, a szer­sze układy do­kła­da re­gu­ła­mi z min-width. Po­dej­ście „de­sk­top first" (naj­pierw mo­ni­tor) robi od­wrot­nie: styl pod­sta­wo­wy jest dla mo­ni­to­ra, a reguły z max-width uprasz­cza­ją go w dół. Na eg­za­mi­nie wy­god­niej­sze jest to drugie, bo arkusz opi­su­je układ dla mo­ni­to­ra, a re­spon­syw­ność do­pi­su­je się na końcu.
Blok @media nie pod­no­si spe­cy­ficz­no­ści reguł, które są w jego wnę­trzu: main { width: 100%; } we­wnątrz @media wy­gry­wa z main { width: 70%; } tylko dla­te­go, że stoi w pliku PÓŹNIEJ. Dla­te­go blok @media umiesz­cza się na końcu ar­ku­sza, a nie na po­cząt­ku. Zasady roz­strzy­ga­nia sporów między re­gu­ła­mi opi­su­je lekcja o do­łą­cza­niu stylów i ka­ska­dzie.

Jed­nost­ki względ­ne, obrazy i tabele

Jed­nost­ka względ­na to taka, której war­tość zależy od czegoś innego niż stały piksel: od ro­dzi­ca, od ko­rze­nia do­ku­men­tu albo od okna prze­glą­dar­ki. Pro­cent liczy się od wy­mia­ru ro­dzi­ca, vw i vh (viewport width, viewport height) to jeden pro­cent sze­ro­ko­ści i wy­so­ko­ści okna, a rem (root em) to wie­lo­krot­ność roz­mia­ru czcion­ki ko­rze­nia do­ku­men­tu, do­myśl­nie 16 px. Funk­cja clamp() podaje w jednym za­pi­sie war­tość naj­mniej­szą, płynną i naj­więk­szą, więc na­głó­wek rośnie razem z oknem, ale nie prze­kro­czy granic. Same jed­nost­ki omawia lekcja o ko­lo­rach, jed­nost­kach i tek­ście.
h1 { font-size: clamp(1.2rem, 4vw, 2rem); } .przewijana { overflow-x: auto; }
Reguła max-width: 100% zmniej­sza obraz na ekra­nie, ale te­le­fon i tak po­bie­ra plik w pełnym roz­mia­rze, czyli mar­nu­je trans­fer. Po stro­nie HTML robi się to ina­czej: atry­but srcset znacz­ni­ka <img> wy­mie­nia kilka plików z ich sze­ro­ko­ścia­mi i po­zwa­la prze­glą­dar­ce wybrać, a <picture> z kil­ko­ma <source> wska­zu­je inny plik dla innego wa­run­ku sze­ro­ko­ści ekranu. Oba opi­su­je lekcja o ob­ra­zach i mul­ti­me­diach.
Tabela cen ma stałą liczbę kolumn i na ekra­nie o sze­ro­ko­ści 375 px po prostu się nie zmie­ści. Zmniej­sza­nie czcion­ki ni­cze­go nie ratuje, więc tabelę opa­ko­wu­je się blo­kiem z klasą przewijana i wła­ści­wo­ścią overflow-x: auto: prze­wi­ja się sama tabela, a nie cała strona.

Układ sklepu na te­le­fon

Ten sam sklep na trzech szerokościach: przy 1200 px panel boczny stoi obok treści, przy 768 px kolumny są węższe, a przy 375 px układ zwija się w jedną kolumnę
Na mo­ni­to­rze sklep ma menu po­zio­me i panel boczny obok bloku głów­ne­go. Na ta­ble­cie zo­sta­je ten sam układ, tylko ko­lum­ny są węższe. Po­ni­żej 600 px dwie ko­lum­ny obok siebie prze­sta­ją mieć sens: panel scho­dzi pod treść, menu usta­wia się w pionie, a na­głó­wek maleje, żeby nazwa sklepu zmie­ści­ła się w jednym wier­szu. Wszyst­kie te zmiany robi jedna reguła do­pi­sa­na na końcu pliku styl.css.
@media (max-width: 600px) { .srodek { flex-direction: column; } aside, main { width: 100%; } nav ul { flex-direction: column; } h1 { font-size: 150%; } }
.srodek to opa­ko­wa­nie panelu bocz­ne­go i bloku głów­ne­go, usta­wio­ne jako kon­te­ner ela­stycz­ny w lekcji o fle­xbok­sie i gri­dzie. flex-direction: column prze­sta­wia jego ele­men­ty z rzędu na ko­lum­nę, a sze­ro­kość 100 pro­cent daje każ­de­mu z nich cały do­stęp­ny wiersz. Menu to lista <ul> we­wnątrz <nav>, więc ta sama wła­ści­wość układa punkty menu jeden pod drugim. Reguły spoza bloku @media zo­sta­ją w mocy: kolory, mar­gi­ne­sy we­wnętrz­ne i ob­ra­mo­wa­nia nie po­wta­rza­ją się, bo zmie­nia się tylko to, co na­praw­dę ma być inne.

Te­sto­wa­nie re­spon­syw­no­ści

Te­sto­wa­nie re­spon­syw­no­ści to spraw­dze­nie, jak strona za­cho­wu­je się na ko­lej­nych sze­ro­ko­ściach ekranu, a nie tylko czy reguła @media jest w pliku. Pod­sta­wa pro­gra­mo­wa wy­mie­nia je jako osobną umie­jęt­ność, obok samego wy­ko­na­nia strony.
  • ›
    Na­rzę­dzia de­we­lo­per­skie prze­glą­dar­ki: kla­wisz F12 otwie­ra panel, ikona te­le­fo­nu włącza tryb urzą­dze­nia. Można wybrać model z listy, wpisać własną sze­ro­kość i ob­ró­cić ekran do po­zio­mu. Bie­żą­ca sze­ro­kość jest wy­pi­sa­na nad stroną, więc widać, przy której war­to­ści układ się prze­ła­mu­je.
  • ›
    Zwę­ża­nie okna myszą: naj­szyb­szy test na kom­pu­te­rze, dobry do zna­le­zie­nia miej­sca, w którym układ się psuje, zanim doj­dzie do punktu prze­ła­ma­nia.
  • ›
    Praw­dzi­wy te­le­fon w tej samej sieci: wpi­su­je się adres IP kom­pu­te­ra z ser­we­rem lo­kal­nym za­miast localhost. Do­pie­ro tu widać roz­miar przy­ci­sków pod palcem i czcion­ki sys­te­mo­we te­le­fo­nu.
Lista kon­tro­l­na jest krótka. Po pierw­sze, na żadnej sze­ro­ko­ści nie ma po­zio­me­go paska prze­wi­ja­nia. Po drugie, tekst jest czy­tel­ny bez po­więk­sza­nia. Po trze­cie, od­no­śni­ki i przy­ci­ski dają się na­ci­snąć palcem, czyli nie stoją skle­jo­ne w jednym rzę­dzie. Po czwar­te, obrazy i tabele nie wy­sta­ją poza ekran.

Na eg­za­mi­nie

Py­ta­nie pi­sem­ne o regułę dla ekra­nów od 600 px do 800 px ma tylko jedną po­praw­ną od­po­wiedź: @media screen and (min-width: 600px) and (max-width: 800px). Od­po­wiedź błędna wy­glą­da prawie tak samo, ale ma dwa na­wia­sy po­sta­wio­ne obok siebie bez słowa and, a to już jest błąd skład­ni: prze­glą­dar­ka od­rzu­ca całą regułę i żaden styl z jej wnę­trza nie za­dzia­ła. Druga od­po­wiedź błędna podaje jeden wa­ru­nek min-width: 800px, czyli ekrany od 800 px w górę, a nie prze­dział. Kie­ru­nek jest stały: max-width to „do", min-width to „od".
Wra­ca­ją jesz­cze trzy kształ­ty. Znacz­nik usta­wia­ją­cy widok na te­le­fo­nie ma stać w sekcji head, nie w body i nie w ar­ku­szu stylów. Obraz ska­lu­ją­cy się do roz­mia­ru ekranu ma mieć sze­ro­kość podaną w pro­cen­tach, a nie oba wy­mia­ry w pik­se­lach. Ukry­cie sekcji na ekra­nach do 400 px to klasa z display: none za­pi­sa­na we­wnątrz @media (max-width: 400px), a nie poza nim.
W za­da­niu prak­tycz­nym re­spon­syw­ność bywa jednym z punk­tów opisu stylu i jedna reguła @media prze­sta­wia­ją­ca układ na ko­lum­nę zwykle wy­star­cza. Spraw­dza­na jest w trybie urzą­dze­nia, więc ten sam tryb jest ostat­nim kro­kiem przed od­da­niem pracy. Reguła musi trafić do ze­wnętrz­ne­go pliku do­łą­czo­ne­go przez <link>: styl wpi­sa­ny w atry­bu­cie style nie przyj­mie za­py­ta­nia o media w ogóle.

Ściąga

Zapis
Znaczy
<meta name="viewport" content="width=device-width, initial-scale=1">
sze­ro­kość widoku równa sze­ro­ko­ści ekranu, bez po­mniej­sza­nia
@media screen and (max-width: 600px)
ekran o sze­ro­ko­ści do 600 px
@media screen and (min-width: 600px)
ekran o sze­ro­ko­ści od 600 px w górę
@media screen and (min-width: 600px) and (max-width: 800px)
prze­dział od 600 px do 800 px
@media print
wersja do druku, tu ukrywa się menu
@media (orientation: landscape)
urzą­dze­nie ob­ró­co­ne po­zio­mo
max-width: 100%; height: auto;
obraz nigdy szer­szy niż blok, z za­cho­wa­niem pro­por­cji
width: 30%
sze­ro­kość li­czo­na od ro­dzi­ca, kurczy się z oknem
1vw, 1vh
jeden pro­cent sze­ro­ko­ści i wy­so­ko­ści okna
1rem
roz­miar czcion­ki ko­rze­nia do­ku­men­tu, do­myśl­nie 16 px
overflow-x: auto
po­zio­me prze­wi­ja­nie samej tabeli, nie strony
display: none
ukry­cie sekcji na wąskim ekra­nie
Pobierz ściągę PDF

[ W TYM DZIALE ]

poprzednia: Flexbox i Grid: układ sekcji jak w zadaniu CKEnastępna: Tła, gradienty, cienie, zaokrąglenia, transition i animationspis działu: CSS

[ INF.03: INNE ARTYKUŁY ]

Hub INF.03Zakres materiałuBazy danych i SQL na egzaminie INF.03CSS na egzaminie INF.03Formularze HTML na egzaminie INF.03Grafika i multimedia na egzaminie INF.03HTML na egzaminie INF.03pokaż więcej (39)
ZAWODNIK
egzamin zawodowy INF.02 · INF.03 · INF.04
Serwer Discord›
Egzaminy zawodowe IT/Matury/Studia
@yastor
Polityka prywatnościRegulamin
© 2026 Zawodnik · by Yastor
Arkusze i zasady oceniania pochodzą z CKE. Serwis nie jest powiązany z Centralną Komisją Egzaminacyjną.