Zobacz, które media queries pasują teraz do Twojego ekranu, z aktualizacją przy zmianie rozmiaru. Składnia zakresów, prefers-color-scheme, reduced motion, hover i pointer, breakpointy i container queries.
Media query stosuje CSS tylko wtedy, gdy spełniony jest warunek dotyczący urządzenia lub ustawień użytkownika. @media (width >= 48rem) { ... } celuje w szersze ekrany; prefers-color-scheme, prefers-reduced-motion, hover i pointer opisują ustawienia i sposób wprowadzania. Najpierw napisz style dla małych ekranów, a potem dodaj zapytania min-width dla większych układów.
Najczęściej używane zapytania
Panel poniżej uruchamia szesnaście zapytań przez window.matchMedia w Twojej przeglądarce i aktualizuje się, gdy zmieniasz rozmiar okna, obracasz telefon lub przełączasz tryb ciemny. Pod nim: składnia zakresów, zapytania o preferencje użytkownika, zapytania o sposób wprowadzania, breakpointy frameworków i sytuacje, w których lepszym narzędziem jest container query.
To krótszy sposób zapisu warunków szerokości z operatorami porównania: (width >= 600px) zamiast (min-width: 600px) oraz (400px <= width < 900px) dla przedziału. Działa we wszystkich aktualnych głównych przeglądarkach; Safari dodało ją w wersji 16.4 w 2023, więc sprawdź caniuse, jeśli wspierasz starsze urządzenia.
Arkusze stylów mobile-first używają min-width: style bazowe obsługują małe ekrany, a każde zapytanie dodaje układ dla szerszych. To utrzymuje CSS dla małych ekranów prostym. max-width sprawdza się przy drobnych wyjątkach, ale mieszanie obu przy tym samym breakpoincie może zostawić jednopikselową lukę lub nakładanie; składnia zakresów z < i >= tego unika.
Użyj @media (prefers-color-scheme: dark) i zdefiniuj w nim na nowo zmienne kolorów. W JavaScripcie window.matchMedia('(prefers-color-scheme: dark)').matches daje tę samą odpowiedź, a jego zdarzenie change uruchamia się, gdy użytkownik przełączy tryb.
Media queries patrzą na viewport i urządzenie. Container queries patrzą na rozmiar elementu nadrzędnego oznaczonego przez container-type. Karta, która ma zmienić układ, gdy jej kolumna jest wąska, gdziekolwiek zostanie umieszczona, potrzebuje container query.
Częste przyczyny: brakuje znacznika meta viewport, więc telefony udają, że mają około 980px szerokości; zapytanie stoi nad regułą, którą powinno nadpisać, i przegrywa przez kolejność w kodzie; albo brakuje spacji lub nawiasu, co po cichu unieważnia cały warunek.
Wartości z oficjalnej dokumentacji Tailwind CSS v4 i Bootstrap 5. Wartości Tailwind są w rem, tu pokazane przy domyślnych 16px.
Domyślne breakpointy w dwóch popularnych frameworkach (min-width, mobile first)
Składnia zakresów czyta się jak matematyka i ułatwia tworzenie nienakładających się przedziałów: < z jednej strony, >= z drugiej.
Drobne dodatki, dzięki którym strona działa naturalnie na każdym urządzeniu.
matchMedia zwraca obiekt z matches i zdarzeniem change. Tego używa panel na żywo na tej stronie.
Wybór między nimi
Obie karty mają ten sam kod. Tylko szeroka ma miejsce, aby przełączyć się na układ wierszowy. Zmień szerokości, aby zobaczyć zmianę.
Warianty Tailwind v4 i generowany przez nie CSS
Szerokość
Węższy niż Tailwind sm (640px przy domyślnym rozmiarze czcionki)
Szerokość
Między Tailwind sm a lg
Szerokość
Tailwind lg i większe
Szerokość
Klasyczny breakpoint tabletu, stara składnia
Orientacja
Viewport wyższy niż szerszy
Orientacja
Viewport szerszy niż wyższy
Wprowadzanie
Główne urządzenie wejściowe obsługuje hover (mysz, touchpad)
Wprowadzanie
Główne urządzenie wejściowe jest nieprecyzyjne (palec)
Wprowadzanie
Główne urządzenie wejściowe jest precyzyjne (mysz, rysik)
Wprowadzanie
Co najmniej jedno urządzenie wejściowe obsługuje hover
Preferencje
System ustawiony na tryb ciemny
Preferencje
Użytkownik poprosił o mniej ruchu
Preferencje
Użytkownik poprosił o większy kontrast
Ekran
Ekran o wysokiej gęstości, 2x lub więcej
Ekran
Działa jako zainstalowana aplikacja internetowa
Ekran
Drukowanie lub podgląd wydruku
Kopiuj pasujące
Viewport: {size}. Zmień rozmiar okna, obróć urządzenie lub zmień motyw systemu, a lista się zaktualizuje.
mierzenie...
{w} x {h} CSS px, współczynnik pikseli {r}x
Wyniki media queries na żywo
Grupa
Zapytanie
Pasuje, gdy
Teraz
Tak
Nie
n/a oznacza, że ta przeglądarka nie potrafiła sparsować zapytania, co zdarza się przy składni zakresów w starszych wersjach. Potrzebujesz dokładnych rozmiarów urządzenia? Wypróbuj
narzędzie do rozdzielczości ekranu
Zacznij za darmo · Bez karty kredytowej