Zapytania o szerokość, wysokość i orientację
Nauczy się Pan/Pani kierować media features do określonych wymiarów viewportu i orientacji urządzenia.
Zapytania o szerokość, wysokość i orientację to bezpłatna lekcja CSS Academy na CoddyKit. To lekcja 2 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.
Cecha mediów width
Cecha width dotyczy szerokości obszaru widoku. Należy używać min-width i max-width do definiowania zakresów.
<div class="box">width feature demo</div>
Cecha mediów height
Cecha height dotyczy wysokości obszaru widoku. Jest przydatna w przypadku niskich obszarów widoku, takich jak telefony w orientacji poziomej, gdzie przestrzeń pionowa jest ograniczona.
<div class="hero">Hero (grows on tall viewports)</div>
Wzorzec krótkiego obszaru widoku
Należy wykrywać niskie obszary widoku i zmniejszać odstępy wewnętrzne lub wysokości, które mogłyby spowodować przepełnienie treści:
<div class="modal">Modal content that scrolls when the viewport is short. Lorem ipsum dolor sit amet, consectetur.</div>
orientation: portrait i landscape
Cecha orientation wykrywa, czy obszar widoku jest wyższy (portrait), czy szerszy (landscape) w porównaniu z drugim kierunkiem.
<div class="hero">Orientation-aware hero</div>
Współczynnik pikseli urządzenia
Ekrany o wysokim DPI (Retina) można wykrywać za pomocą cechy resolution lub niestandardowej, ale szeroko obsługiwanej cechy -webkit-device-pixel-ratio.
<div class="logo"></div>
Cecha aspect-ratio
Należy kierować reguły do określonych proporcji obszaru widoku. Jest to przydatne do odmiennego wyśrodkowywania treści w obszarach widoku 4:3 i 16:9.
<div class="video"></div>
Możliwość hover
Cecha hover: hover wykrywa, czy podstawowym urządzeniem wejściowym jest precyzyjny wskaźnik obsługujący najeżdżanie. Jest przydatna w przypadku stylów przeznaczonych dla urządzeń dotykowych.
<div class="card">Card (hover me)</div>
<div class="card is-hovered">Card (hover state shown)</div>
Cecha pointer
pointer: fine oznacza precyzyjny kursor myszy, a pointer: coarse — palec lub rysik. Jest to przydatne do dopasowywania rozmiarów obszarów przeznaczonych do stukania.
<button>Tap target</button>
Łączenie width i height
Należy tworzyć reguły przeznaczone dla telefonów w orientacji poziomej, łącząc min-width z max-height:
<div class="nav">Nav bar</div>
Wymiary obszaru widoku a wymiary urządzenia
Zapytania medialne CSS dotyczą obszaru widoku (okna przeglądarki), a nie fizycznych wymiarów ekranu urządzenia. Zmiana rozmiaru okna przeglądarki na komputerze zmienia szerokość obszaru widoku w czasie rzeczywistym.
Jednostki obszaru widoku i zapytania medialne
Zapytania medialne i jednostki obszaru widoku (vw, vh) reagują na te same wymiary obszaru widoku. Zapytania medialne służą do zmian układu, a jednostki obszaru widoku do płynnego określania rozmiaru w ramach układu.
Szybkie sprawdzenie
Jaka cecha mediów wykrywa, czy urządzenie ma precyzyjny wskaźnik, którym można najeżdżać na elementy?
Podsumowanie
Cechy mediów obejmują width, height, orientation, resolution, hover i pointer. Należy używać ich do dostosowywania układu do wymiarów obszaru widoku i możliwości urządzenia. Cechy hover i pointer pomagają rozróżniać urządzenia dotykowe i myszy, a nie tylko rozmiary ekranów.
Często zadawane pytania
Czy lekcja „Zapytania o szerokość, wysokość i orientację” jest bezpłatna?
Tak — pełny tekst „Zapytania o szerokość, wysokość i orientację” 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 „Zapytania o szerokość, wysokość i orientację”?
Nauczy się Pan/Pani kierować media features do określonych wymiarów viewportu i orientacji urządzenia. Ć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 2 z 4.
Ile czasu zajmuje lekcja „Zapytania o szerokość, wysokość i orientację”?
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