Конструктор media queries

• Мгновенная генерация media queries: создавайте адаптивные CSS media queries и смотрите их в реальном времени. Наш конструктор media queries формирует точное правило @media, пока вы настраиваете каждый брейкпоинт — без ожидания, без запросов к серверу и без догадок.
• Безопасный конструктор media queries онлайн: вся генерация media queries происходит локально в браузере. Ваш CSS-код и конфигурации брейкпоинтов никогда не покидают устройство, обеспечивая 100 % конфиденциальность при каждом использовании нашего конструктора media queries онлайн.
• Конструктор media queries онлайн — без установки: пользуйтесь конструктором media queries прямо в любом браузере, без загрузок, плагинов и программ. Создавайте адаптивные брейкпоинты для любого проекта с любого устройства, где угодно и совершенно бесплатно.
• Множество вариантов брейкпоинтов: настраивайте min-width, max-width, диапазон (мин. + макс.), min-height, max-height, ориентацию или полностью свои условия. Выбирайте единицы px, em или rem. Загружайте пресеты Bootstrap 5, Tailwind CSS или mobile-first одним щелчком.

• Адаптивный веб-дизайн: используйте наш конструктор media queries, чтобы задать брейкпоинты для макетов на мобильных, планшетах и десктопах. Генерируйте правила min-width и max-width, которые адаптируют макет, типографику и отступы под любой размер экрана, без единой строки CSS вручную.
• Настройка брейкпоинтов фреймворков: загружайте пресеты Bootstrap 5 или Tailwind CSS одним щелчком, чтобы получить точные брейкпоинты этих фреймворков. Измените значения под свою дизайн-систему и скопируйте CSS прямо в проект.
• Разработка в подходе mobile-first: создавайте mobile-first таблицы стилей, генерируя media queries min-width, которые постепенно улучшают макет по мере роста вьюпорта. Наш конструктор media queries позволяет легко увидеть диапазон брейкпоинтов на линейке ещё до написания кода.
• Таргетинг планшетов и ориентации: нацеливайтесь на конкретные ориентации устройства с помощью media queries для портретного и альбомного режима. Используйте тип запроса «диапазон», чтобы выделить вьюпорты размером с планшет между двумя брейкпоинтами, гарантируя, что стили применяются только к нужному классу устройств.
• Генерация таблиц стилей для печати: переключите тип носителя на «print», чтобы создать media queries для печати. Управляйте тем, какие стили применяются при печати страницы: скрывайте навигацию, корректируйте размеры шрифта и убирайте фоны для чистого печатного результата.
• Документирование дизайн-системы: документируйте брейкпоинты своей дизайн-системы, генерируя полный CSS-файл с именованными брейкпоинтами и комментариями. Скачайте файл .css и поделитесь им с командой как ориентиром для согласованного адаптивного поведения всех компонентов.

CSS media query — это условное правило, которое применяет стили только тогда, когда браузер или устройство соответствует заданному условию: минимальной ширине вьюпорта, максимальной высоте экрана или ориентации устройства. Синтаксис: @media screen and (min-width: 768px) { }. Media queries — основа адаптивного веб-дизайна: они позволяют одной таблице стилей адаптировать макеты, типографику и отступы под любой размер экрана. Наш конструктор media queries создаёт такие правила визуально, чтобы вы могли настраивать брейкпоинты, не запоминая синтаксис.

1. Добавьте брейкпоинты: нажмите «Добавить брейкпоинт» или загрузите пресет (Bootstrap 5, Tailwind CSS, Mobile First), чтобы заполнить набор именованных брейкпоинтов. У каждого брейкпоинта своя панель настроек.
2. Настройте каждый брейкпоинт: выберите тип носителя (screen, print, all), тип запроса (min-width, max-width, диапазон, высота, ориентация или свой), введите значения и выберите единицу (px, em, rem). Сгенерированный запрос обновляется вживую во время ввода.
3. Скопируйте или скачайте CSS: конструктор media queries выдаёт полный CSS для всех брейкпоинтов. Копируйте отдельные запросы или скачайте всю таблицу стилей файлом .css.

• Запросы min-width: применяют стили начиная с минимальной ширины вьюпорта и выше — стандартный подход адаптивного дизайна mobile-first.
• Запросы max-width: применяют стили до максимальной ширины вьюпорта — используются в подходе desktop-first, чтобы переопределить стили для меньших экранов.
• Запросы диапазона (мин. + макс.): объединяют min-width и max-width, чтобы нацелиться на конкретный диапазон вьюпорта, например стили только для планшетов от 768px до 1023px.
• Запросы ориентации: нацеливаются на портретную или альбомную ориентацию независимо от размера вьюпорта — полезно для корректировки макета на планшетах.

Единица, выбранная для брейкпоинтов media queries, влияет на то, как они реагируют на предпочтения пользователя. Брейкпоинты в px абсолютны и не масштабируются вместе с настройками размера шрифта в браузере. Брейкпоинты в em относительны к базовому размеру шрифта браузера (обычно 16px), поэтому 48em равны 768px при стандартном размере, но масштабируются, если пользователь меняет размер шрифта в браузере. rem ведёт себя в media queries так же, как em (оба ссылаются на значение браузера по умолчанию, а не на корневой элемент). Многие разработчики, заботящиеся о доступности, предпочитают брейкпоинты в em или rem, потому что они уважают предпочтения пользователя по размеру шрифта и гарантируют корректную перестройку макета для тех, кто увеличил размер шрифта по умолчанию.