Łączenie wielu media queries
Nauczy się Pan/Pani używać operatorów and, or i not do łączenia media features w złożone zapytania.
Łączenie wielu media queries to bezpłatna lekcja CSS Academy na CoddyKit. To lekcja 4 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.
Operator and
Słowo kluczowe and wymaga jednoczesnego spełnienia wszystkich warunków. Jest przydatne do wspólnego kierowania reguł do urządzeń o określonych rozmiarach i typach.
<div class="box">and operator demo</div>
Zakres z and
Łączenie min-width i max-width za pomocą and pozwala określić zakres szerokości viewportu (style tylko dla tabletów):
<div class="layout">
<div class="col">Col A</div>
<div class="col">Col B</div>
</div>
Przecinek jako OR
Zapytania rozdzielone przecinkami działają jak OR — style są stosowane, jeśli pasuje którekolwiek zapytanie:
<div class="page">
Comma as OR
<div class="sidebar">Sidebar</div>
</div>
Operator not
not neguje całe zapytanie medialne. Należy używać go ostrożnie — dotyczy całego wyrażenia zapytania, a nie tylko pierwszego warunku.
<div class="doc">not operator demo</div>
not z nawiasami (nowoczesna składnia)
Nowoczesne zapytania medialne poziomu 4 pozwalają używać not() jako funkcji dla pojedynczych cech:
<div class="panel">not() function demo</div>
Słowo kluczowe only (starsza składnia)
Słowo kluczowe only służyło do ukrywania zapytań medialnych przed starszymi przeglądarkami, które nie obsługiwały cech mediów. Nowoczesne przeglądarki je ignorują, ale nie powoduje ono problemów.
<div class="box">only keyword demo</div>
Zagnieżdżanie zapytań medialnych (CSS Nesting)
W przypadku natywnego zagnieżdżania CSS zapytania medialne można zapisywać wewnątrz bloków selektorów:
<div class="card">Nested media query demo</div>
Urządzenia mobilne + wysokie DPI
Określenie urządzeń mobilnych (małych i o wysokim DPI):
<div class="icon"></div>
Drukowanie + kolor
Wiele cech mediów dla stylów wydruku, które dotyczą wyłącznie drukarek kolorowych:
<div class="chart">Chart (color reverts when printing on a color printer)</div>
Zapytanie medialne w @import
Zapytania medialne można stosować podczas importowania, aby warunkowo ładować całe arkusze stylów (choć blokuje to renderowanie, dlatego należy robić to oszczędnie):
<div class="page">Page content (conditionally imported stylesheets apply above)</div>
Właściwości logiczne w złożonych zapytaniach
Ogólna zasada mówi, że prostsze zapytania są łatwiejsze w utrzymaniu. Należy unikać łączenia zbyt wielu warunków. Gdy zapytanie staje się złożone, warto rozważyć przebudowanie podejścia do CSS zamiast dalszego komplikowania zapytania.
Szybkie sprawdzenie
W którym zapytaniu medialnym style są stosowane, gdy viewport ma co najmniej 600 pikseli szerokości LUB urządzenie jest ustawione poziomo?
Podsumowanie
and wymaga spełnienia wszystkich warunków. Przecinki działają jak OR między zapytaniami. not neguje całe zapytanie. Połączenie min-width i max-width pozwala określić zakres. Nowoczesny CSS obsługuje zagnieżdżanie zapytań medialnych wewnątrz bloków selektorów oraz składnię zakresów, która upraszcza wyrażenia.
Często zadawane pytania
Czy lekcja „Łączenie wielu media queries” jest bezpłatna?
Tak — pełny tekst „Łączenie wielu media queries” 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 „Łączenie wielu media queries”?
Nauczy się Pan/Pani używać operatorów and, or i not do łączenia media features w złożone zapytania. Ć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 4 z 4.
Ile czasu zajmuje lekcja „Łączenie wielu media queries”?
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
- Składnia i typowe breakpointy
- Zapytania o szerokość, wysokość i orientację
- Prefers-Color-Scheme i Prefers-Reduced-Motion
- Łączenie wielu media queries