Zapytania medialne i projektowanie mobile-first
Pisz punkty przerwania za pomocą zapytań medialnych min-width, twórz najpierw układ mobilny i stopniowo wzbogacaj go dla większych ekranów.
Zapytania medialne i projektowanie mobile-first to bezpłatna lekcja Frontend 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 Frontend Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Frontend Academy zawiera 4 lekcji w sumie.
Czym są media queries?
Media queries stosują reguły CSS tylko wtedy, gdy określone warunki są spełnione — na przykład gdy szerokość viewportu przekracza ustalony próg. Stanowią podstawę responsywnego projektowania, pozwalając jednemu arkuszowi stylów dostosować się do dowolnego rozmiaru ekranu.
Podstawowa składnia
Media query obejmuje blok CSS regułą @media. Zawarte w nim reguły mają zastosowanie tylko wtedy, gdy warunek jest spełniony.
@media (min-width: 768px) {
.container {
max-width: 1200px;
margin: 0 auto;
}
}min-width a max-width
min-width: stosuje style, gdy viewport ma co najmniej taką szerokość (podejście mobile-first). max-width: stosuje style, gdy viewport ma co najwyżej taką szerokość (podejście desktop-first). W projektowaniu mobile-first należy preferować min-width.
/* Mobile-first (preferred): */
@media (min-width: 768px) { /* tablets and up */ }
@media (min-width: 1024px) { /* desktops and up */ }
/* Desktop-first: */
@media (max-width: 767px) { /* phones only */ }Podejście mobile-first
Najpierw należy napisać kod CSS dla małych ekranów (poza dowolnym zapytaniem media). Następnie za pomocą zapytań media z min-width można stopniowo dodawać złożoność dla większych ekranów. Dzięki temu kod CSS dla użytkowników urządzeń mobilnych jest mniejszy, a cały kod — bardziej przejrzysty.
.card {
/* Mobile defaults: single column */
padding: 16px;
font-size: 0.9rem;
}
@media (min-width: 768px) {
.card {
/* Tablet enhancement */
padding: 24px;
font-size: 1rem;
}
}Najczęstsze breakpointy
Punkty przerwania należy wybierać na podstawie zawartości, a nie konkretnych urządzeń. Popularne wartości początkowe to: 480px (duże telefony), 768px (tablety), 1024px (małe komputery), 1280px (duże komputery). Należy unikać punktów przerwania dopasowanych do konkretnych modeli urządzeń.
Typy mediów
Oprócz szerokości ekranu można kierować style do typów mediów: screen dla wyświetlaczy oraz print dla drukarek. Zapytania medialne dotyczące wydruku pozwalają dostosować wygląd strony podczas drukowania (ukryć nawigację, dostosować kolory).
@media print {
nav, footer, .ads {
display: none;
}
body {
font-size: 12pt;
color: black;
}
}Łączenie warunków za pomocą and
Warunki można łączyć za pomocą and: style zostaną zastosowane tylko wtedy, gdy oba warunki są spełnione. Do bardziej złożonej logiki służą not i or.
@media (min-width: 768px) and (max-width: 1023px) {
/* tablets only */
}
@media (orientation: landscape) and (max-width: 767px) {
/* landscape phones */
}prefers-color-scheme
Reaguj na preferencję trybu ciemnego ustawioną w systemie operacyjnym użytkownika. Domyślnie zapewnij ciemny motyw bez konieczności dodawania przełącznika.
@media (prefers-color-scheme: dark) {
body {
background: #1a202c;
color: #f7fafc;
}
}prefers-reduced-motion
Uwzględniaj użytkowników, którzy preferują ograniczenie ruchu (na przykład z powodu zaburzeń przedsionkowych lub epilepsji). W tym zapytaniu medialnym wyłączaj animacje albo je upraszczaj.
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
}Zapytania kontenerowe — przyszłość
Zapytania kontenerowe (@container) stosują style na podstawie rozmiaru nadrzędnego kontenera, a nie obszaru widoku. Umożliwiają prawdziwie komponentową responsywność i są dostępne we wszystkich nowoczesnych przeglądarkach od 2023 roku.
.card-container {
container-type: inline-size;
}
@container (min-width: 400px) {
.card { flex-direction: row; }
}Właściwości logiczne na potrzeby obsługi RTL
W układach działających zarówno w językach pisanych od lewej do prawej, jak i od prawej do lewej używaj właściwości logicznych, takich jak margin-inline-start, zamiast margin-left. Dzięki temu responsywne układy będą bardziej przyszłościowe.
Szybkie sprawdzenie
Które podejście poprawnie definiuje strategię CSS mobile-first?
Podsumowanie: zapytania medialne i mobile-first
W podejściu mobile-first używa się @media (min-width: N) do progresywnego ulepszania. Style bazowe należy pisać dla urządzeń mobilnych bez zapytań medialnych. Na większych ekranach należy dodawać większą złożoność. prefers-color-scheme służy do obsługi trybu ciemnego, prefers-reduced-motion — do zapewnienia dostępności, a zapytania kontenerowe — do komponentowej responsywności.
Często zadawane pytania
Czy lekcja „Zapytania medialne i projektowanie mobile-first” jest bezpłatna?
Tak — pełny tekst „Zapytania medialne i projektowanie mobile-first” 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 Frontend Academy, przejdź na CoddyKit PRO. Kurs Frontend Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „Zapytania medialne i projektowanie mobile-first”?
Pisz punkty przerwania za pomocą zapytań medialnych min-width, twórz najpierw układ mobilny i stopniowo wzbogacaj go dla większych ekranów. Ćwiczysz Frontend 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ąć Frontend Academy?
Nie wymagamy żadnego doświadczenia. Frontend 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 „Zapytania medialne i projektowanie mobile-first”?
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 Frontend Academy?
Tak. Każda lekcja Frontend 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
- Znacznik meta viewport
- Flexbox do tworzenia układów
- CSS Grid do tworzenia układów
- Zapytania medialne i projektowanie mobile-first