Генератор медиа-запросов CSS
Генерируйте блоки медиа-запросов CSS для мобильного-first или desktop-first подходов, используя точки останова Bootstrap, Tailwind или пользовательские значения.
Генератор медиа-запросов CSS
Выберите масштаб точек останова, и этот инструмент напишет для вас соответствующие блоки @media, готовые к вставке в таблицу стилей. Выберите предустановки Bootstrap или Tailwind для переиспользования точек останова этих фреймворков, или переключитесь на Пользовательский и введите свои ширины в виде списка через запятую или переноса строки — обычные числа вроде «480, 768, 1024» автоматически получат названия, или объедините каждое с меткой, такой как «tablet:768».
Вывод mobile-first каскадирует вверх только с min-width, это паттерн, по которому в наши дни пишется большинство CSS компонентов; desktop-first каскадирует вниз только с max-width, самая большая точка останова в начале. Включите синтаксис диапазонов, чтобы ограничить каждую точку останова с обеих сторон — каждый блок применяется только к этому уровню, верхний уровень остается открытым выше. Ширины выводятся в px, em или rem, предполагая стандартный размер шрифта root 16px для преобразования. Четыре дополнительных переключателя добавляют отдельные запросы для ориентации, указателей с возможностью наведения, prefers-color-scheme и prefers-reduced-motion, полезные когда странице нужны эти проверки вместе с её точками останова макета. Переключите формат вывода на SCSS, и каждый блок становится именованным @mixin с @content вместо этого, чтобы ваша сборка Sass могла @include его везде, где нужно правило.
Список точек останова, который не разрешается во что-то полезное — пустой, или каждый элемент ненумеровой — отчетливо сообщается, вместо того чтобы производить неработающий CSS; дублирующиеся ширины коллапсируют в один блок, сохраняя свое первое имя. Очень длинные пользовательские списки ограничены, так чтобы вставка огромного или неправильно отформатированного значения никогда не замораживала вкладку.
Всё работает локально в вашем браузере — ничто из того, что вы вводите, не загружается никуда. Скопируйте результат, загрузите его как файл .txt, или отправьте его прямо на вход другого инструмента, чтобы продолжить работу.