INF.03Frontend & CSS
Media Queries i Responsive Web Design (RWD)
Technika CSS pozwalająca na dopasowanie wyglądu i układu strony do różnych rozdzielczości ekranów (smartfony, tablety, laptopy).
1. Znacznik meta viewport w sekcji <head>:
HTML
<meta name="viewport" content="width=device-width, initial-scale=1.0">Bez tego znacznika przeglądarki mobilne będą skalować stronę desktopową zamiast renderować układ responsywny.
2. Składnia reguł @media w CSS:
CSS
/* Domyślne style dla komputerów: */
.glowny-uklad {
display: flex;
flex-direction: row;
}
/* Zmiana układu dla ekranów poniżej 768px (tablety i telefony): */
@media (max-width: 768px) {
.glowny-uklad {
flex-direction: column;
}
.menu {
display: none;
}
}Najczęstsze pułapki na egzaminie INF.03:
- Podejście Mobile First używa reguł
@media (min-width: ...)(projektujemy najpierw dla małych ekranów, a potem rozszerzamy dla większych).
Chcesz sprawdzić to pojęcie w praktyce?
Przeszukaj pytania z oficjalnych arkuszy CKE powiązane z hasłem Media Queries i Responsive Web Design (RWD) lub rozpocznij trening.