Generator Media Query
Generuj gotowe CSS media queries dla dowolnych breakpointów. Obsługuje mobile-first, desktop-first i tryb zakresowy z jednostkami px, em i rem. Profesjonalne narzędzie online, które działa w Twojej przeglądarce. Szybko, bezpiecznie i bez instalowania zbędnego oprogramowania.
-
1Wprowadź dane
Wpisz treść, wklej tekst lub załaduj plik z dysku. -
2Kliknij przycisk
Narzędzie natychmiast przetworzy Twoje dane w przeglądarce. -
3Pobierz wynik
Skopiuj gotowy tekst lub zapisz plik na urządzeniu.
return "Wynik gotowy w 0.1s";
}
Generator media queries CSS
Twórz gotowe bloki CSS media queries bez pisania kodu ręcznie. Wybierz breakpointy, tryb (mobile-first lub desktop-first), właściwość oraz jednostkę — narzędzie wygeneruje poprawne reguły CSS gotowe do wklejenia w projekt.
Do czego służy
Generator media queries CSS pozwala błyskawicznie tworzyć reguły responsywności bez konieczności pamiętania składni. Obsługuje tryby mobile-first (min-width), desktop-first (max-width) oraz zakresowy (range). Możesz definiować wiele breakpointów jednocześnie, wybierać jednostki (px, em, rem), dodawać filtry orientacji, schematu kolorów (dark/light mode) i blok prefers-reduced-motion. Wynik zawiera gotowy kod CSS z opcjonalnymi komentarzami i możliwością minifikacji.
Jak używać
1. Wpisz breakpointy (jeden na linię, np. sm: 576 lub samo 768). 2. Wybierz tryb — mobile-first buduje zapytania od małych ekranów w górę, desktop-first od dużych w dół, range tworzy przedziały. 3. Ustaw właściwość (width lub height), typ mediów i jednostkę. 4. Wklej zawartość bloku CSS. 5. Kliknij „Generuj CSS" — skopiuj wynik jednym kliknięciem.
Najczęstsze pytania
Czym różni się mobile-first od desktop-first?
Mobile-first używa min-width — style stosowane są od podanej szerokości w górę. Desktop-first używa max-width — style działają do podanej szerokości. Podejście mobile-first jest zalecane przez większość frameworków CSS i poprawia wydajność na urządzeniach mobilnych.
Czy mogę użyć jednostek em zamiast px?
Tak. Generator obsługuje px, em i rem. Przy em/rem podaj bazowy rozmiar czcionki (domyślnie 16 px) — narzędzie przeliczy breakpointy na właściwą wartość. Używanie em/rem sprawia, że media queries reagują na ustawienia czcionki w przeglądarce użytkownika.
Co to jest tryb zakresowy (range)?
Tryb range generuje dla każdego breakpointu zapytanie z min-width i max-width jednocześnie — każdy blok CSS obejmuje tylko określony przedział szerokości. To przydatne, gdy chcesz stosować różne style tylko dla konkretnego zakresu, np. wyłącznie dla tabletów.
Jak dodać dark mode do media queries?
Wybierz opcję schematu kolorów „Ciemny (dark)" lub „Oba (dark + light)". Generator automatycznie doda warunek (prefers-color-scheme: dark) do każdego bloku, generując duplikaty z odpowiednim filtrem.