Generator CSS media query
Generuj CSS media query bloki z Bootstrap, Tailwind lub niestandardowych breakpointów — mobile-first lub desktop-first, range syntax, orientation i dark-mode queries.
Generator CSS media query
Wybierz skalę breakpointów, a to narzędzie napisze dla Ciebie odpowiadające bloki @media, gotowe do wklejenia do arkusza stylów. Wybierz presety Bootstrap lub Tailwind, aby ponownie użyć breakpointów dostarczanych przez te frameworki, lub przełącz się na tryb Niestandardowy i wpisz własne szerokości jako listę oddzieloną przecinkami lub liniami — zwykłe liczby takie jak "480, 768, 1024" automatycznie się nazywają, lub możesz każdą sparować z etykietą taką jak "tablet:768".
Wyjście mobile-first kaskaduje w górę tylko min-width, wzór, w którym dzisiaj napisana jest większość CSS komponentów; desktop-first kaskaduje w dół tylko max-width, z największym breakpointem na pierwszym miejscu. Włącz range syntax, aby ograniczyć każdy breakpoint po obu stronach — każdy blok następnie stosuje się tylko do tej warstwy, przy czym górna warstwa pozostaje otwarta. Szerokości drukują się w px, em lub rem, zakładając wspólny rozmiar czcionki root 16px. Cztery dodatkowe przełączniki dodają samodzielne zapytania dla orientacji, wskaźników obsługujących hover, prefers-color-scheme i prefers-reduced-motion, przydatne gdy strona potrzebuje tych sprawdzeń obok swoich breakpointów. Przełącz format wyjścia na SCSS i każdy blok staje się nazwany @mixin z @content zamiast tego, więc Twoja kompilacja Sass może @include go wszędzie tam, gdzie reguła jest potrzebna.
Lista breakpointów, która nie daje nic użytecznego — pusta lub każdy wpis nie numeryczny — jest jasno raportowana zamiast tworzenia uszkodzonego CSS; zduplikowane szerokości zwijają się do jednego bloku, zachowując swoją pierwszą nazwę. Bardzo długie niestandardowe listy są ograniczone, więc wklejenie ogromnej lub błędnie sformatowanej wartości nigdy nie zamrozi karty.
Wszystko działa lokalnie w Twojej przeglądarce — nic, co wpiszesz, nie jest przesyłane nigdzie. Skopiuj wynik, pobierz go jako plik .txt lub wyślij go bezpośrednio na wejście innego narzędzia, aby kontynuować pracę.