0Pricing
CSS Academy · Lekcja

Składnia i typowe breakpointy

Pozna Pan/Pani składnię media queries oraz standardowe breakpointy używane we współczesnym projektowaniu stron internetowych.

Składnia i typowe breakpointy to bezpłatna lekcja CSS Academy na CoddyKit. To lekcja 1 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej CSS Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs CSS Academy zawiera 4 lekcji w sumie.

Składnia zapytań medialnych

Zapytanie medialne otacza reguły CSS i stosuje je tylko wtedy, gdy warunek jest spełniony. Podstawowa składnia:

<div class="box">Media query syntax demo</div>

Typy mediów

Najczęściej używane typy mediów:

  • all — dotyczy wszystkich urządzeń wyjściowych (domyślnie)
  • screen — ekrany komputerów i telefonów
  • print — podgląd wydruku i drukowanie
  • speech — czytniki ekranowe
<div class="layout">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
  </div>

Cechy mediów

Cechy mediów opisują właściwości urządzenia lub obszaru widoku. Typowe cechy to: width, height, orientation, resolution, prefers-color-scheme, hover.

Zapytania min-width

Najczęściej używana cecha — dotyczy ekranów o szerokości równej progowi lub większej. Jest to podejście mobile-first.

<div class="box">Breakpoint ladder</div>

Typowe punkty przełamania

Nie istnieją uniwersalnie poprawne punkty przełamania. Popularny zestaw oparty na typowych szerokościach urządzeń:

  • 480px — duże telefony
  • 768px — tablety
  • 1024px — małe komputery stacjonarne, tablety w orientacji poziomej
  • 1280px — standardowe komputery stacjonarne
  • 1536px — duże komputery stacjonarne

Punkty przełamania zależne od treści

Zamiast ustalać punkty przełamania na podstawie urządzeń, we współczesnej praktyce ustawia się je tam, gdzie załamuje się treść. Należy zaprojektować układ w jednym rozmiarze, zmieniać jego rozmiar i dodać punkt przełamania, gdy układ zaczyna wyglądać nieprawidłowo.

Składnia zakresów (nowoczesna)

Nowoczesny CSS obsługuje składnię zakresów wewnątrz zapytań medialnych — jest ona czytelniejsza niż łączenie min i max:

<div class="panel">Range syntax demo</div>

Łączenie za pomocą and

Należy użyć and, aby wymagać jednoczesnego spełnienia wielu warunków:

<div class="sidebar">Sidebar</div>

Negowanie za pomocą not

Należy użyć not, aby zanegować zapytanie medialne. Dotyczy ono wszystkiego, co NIE pasuje do zapytania:

<div class="doc">Not-screen demo (affects print/speech only)</div>

Wiele zapytań za pomocą ,

Wiele zapytań należy oddzielać przecinkami — podobnie jak listę selektorów. Style są stosowane, jeśli pasuje którekolwiek zapytanie.

<div class="page">
    Multiple queries with comma
    <div class="nav-drawer">Nav drawer (hidden on wide screens or print)</div>
  </div>

Punkty przełamania oparte na em

Używanie jednostek em dla punktów przełamania zamiast px sprawia, że skalują się one zgodnie z preferencjami użytkownika dotyczącymi rozmiaru czcionki w przeglądarce, poprawiając dostępność.

<div class="box">Em-based breakpoints</div>

Szybkie sprawdzenie

Które zapytanie medialne pasuje do ekranów o szerokości co najmniej 1024px?

Podsumowanie

Zapytania medialne stosują CSS warunkowo na podstawie właściwości urządzenia lub obszaru widoku. Należy używać min-width w podejściu mobile-first, a max-width w podejściu desktop-first. Punkty przełamania należy ustawiać tam, gdzie wymaga tego treść, a nie przy arbitralnie wybranych rozmiarach urządzeń. Nowoczesna składnia zakresów poprawia czytelność.

Często zadawane pytania

Czy lekcja „Składnia i typowe breakpointy” jest bezpłatna?

Tak — pełny tekst „Składnia i typowe breakpointy” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu CSS Academy, przejdź na CoddyKit PRO. Kurs CSS Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Składnia i typowe breakpointy”?

Pozna Pan/Pani składnię media queries oraz standardowe breakpointy używane we współczesnym projektowaniu stron internetowych. Ćwiczysz CSS Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć CSS Academy?

Nie wymagamy żadnego doświadczenia. CSS Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 1 z 4.

Ile czasu zajmuje lekcja „Składnia i typowe breakpointy”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji CSS Academy?

Tak. Każda lekcja CSS Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

  1. Składnia i typowe breakpointy
  2. Zapytania o szerokość, wysokość i orientację
  3. Prefers-Color-Scheme i Prefers-Reduced-Motion
  4. Łączenie wielu media queries
← Powrót do CSS Academy