Media Queries w CSS - wprowadzenie i zadanie

1. Wprowadzenie – czym są media queries?

Media queries to mechanizm w CSS, który pozwala dostosować wygląd strony do różnych urządzeń i rozmiarów ekranów.

Dzięki nim strona:

• wygląda dobrze na telefonie, tablecie i komputerze,

• może zmieniać układ, kolory, rozmiary tekstu,

• reaguje na szerokość ekranu, orientację (pion/poziom) czy typ urządzenia.

Media queries to „instrukcje warunkowe” dla CSS —

jeśli ekran jest mały → użyj tych stylów,
jeśli duży → użyj innych.

Podstawowa składnia media query

Przykład:

-> Gdy szerokość ekranu jest mniejsza lub równa 600px, tło zmieni kolor.

Najważniejsze właściwości (w skrócie)

max-width

Styl działa do określonej szerokości

Telefony 📱

min-width

Styl działa od określonej szerokości

Laptopy i duże ekrany 💻

orientation

Reaguje na ułożenie ekranu

Poziomo / pionowo

Łączenie warunków

Tablety 📟

Zadanie: „Responsywna kartka”

Cel: Zobaczyć, jak media queries zmieniają wygląd strony

Kod startowy: TUTAJ

Polecenie:

1. Stwórz div z klasą .card

2. Domyślnie:

   • kolor: szary

   • tekst: „Ekran standardowy”
     
     

3. Dla ekranów do 600px:

   • kolor: fioletowy

   • tekst: „Telefon ”
     
     

4. Dla ekranów od 900px:

   • kolor: zielony

   • tekst: „Duży ekran ”
     
     

Podpowiedź:
Zmieniając szerokość okna przeglądarki, sprawdź, kiedy styl się zmienia.

Widok mobilny:

Widok tabletowy:

Widok desktopowy:

Zadanie 2. Media Queries – znajdź i popraw błędy

Cel (oczekiwany efekt po poprawkach)

• do 600px (telefon): układ w kolumnie, przycisk na 100% szerokości

• 601–900px (tablet): obrazek i opis obok siebie (flex), obrazek ~40%

• od 901px (desktop): większa typografia + sensowne marginesy/wyśrodkowanie

Skopiuj kod (HTML i CSS) dostępny: TUTAJ

Kody HTML nie modyfikujemy

Polecenie do wykonania:

Napraw CSS tak, aby:

1. Karta była wyśrodkowana i miała sensowną szerokość na desktopie.

2. Obrazek był responsywny (dopasowywał się do szerokości karty).

3. Działały 3 progi:

   • telefon: do 600px

   • tablet: 601–900px

   • desktop: od 901px
     
     

4. Na telefonie przycisk ma mieć 100% szerokości, a na desktopie nie.