UTILS.
Приватность по умолчанию
@

Конструктор CSS медиа-запросов

Создайте адаптивный @media-запрос с пресетами и скопируйте его.

Ваши файлы остаются на этом устройстве

Файлы обрабатываются в браузере и не отправляются на сервер. Сайт загружает код и ресурсы для работы инструментов. Без аккаунтов и трекеров.

Нажмите «Скачать», чтобы сохранить инструмент одним HTML-файлом для работы офлайн.

Конфиденциальность →

Об этом инструменте

Составьте адаптивный @media-запрос, выбрав min-width, max-width или диапазон плюс ориентацию, с пресетами устройств в один клик, затем скопируйте обёртку. Всё работает в вашем браузере.

Часто задаваемые вопросы

В чём разница между min-width и max-width?
min-width применяет стили при этой ширине и выше (mobile-first), а max-width применяет их при этой ширине и ниже.
Как работают пресеты устройств?
Каждый пресет подставляет типичные брейкпоинты — мобильный до 767px, планшет 768–1023px и десктоп от 1024px — которые затем можно точно настроить.

Больше инструментов