Генератор CSS media queries (брейкпоинты)

Генератор CSS media queries (брейкпоинты): для чего нужен

Media queries меняют макет в зависимости от экрана. Этот генератор собирает каркас CSS с брейкпоинтами Bootstrap 5 (576, 768, 992, 1200 и 1400 px), Tailwind (640, 768, 1024, 1280 и 1536 px), простым набором или вашими собственными.

Выберите mobile-first (min-width), desktop-first (max-width, с поправкой 0,02 px, как в Bootstrap) или диапазоны, в px или em, и добавьте условия для тёмной темы, меньшего движения, мыши или касания, ориентации, печати и высокой контрастности. Меняйте размер окна, чтобы увидеть, какие media queries действуют.

Как пользоваться

1. Выберите брейкпоинты и подход.
2. Отметьте дополнительные условия.
3. Скопируйте или скачайте CSS.

Когда использовать

• Начало CSS нового сайта.
• Единые брейкпоинты для команды.
• Изучение того, как работают media queries.

Частые вопросы

Mobile-first или desktop-first?

Mobile-first сегодня используется чаще всего: базовый CSS — для телефона, а каждый min-width добавляет правки для больших экранов. Так телефон, у которого обычно слабее связь и процессор, читает меньше правил. Desktop-first (max-width) работает наоборот и полезен для адаптации старых сайтов.

Какие брейкпоинты использовать?

У Bootstrap 5 это 576, 768, 992, 1200 и 1400 px; у Tailwind — 640, 768, 1024, 1280 и 1536 px. Лучше, чем копировать фреймворк, ставить брейкпоинт там, где ломается ваш макет, но оба набора — хорошие отправные точки.

Почему в media queries лучше em?

В media queries 1em равен размеру шрифта браузера по умолчанию (обычно 16 px). Если человек увеличил размер шрифта по умолчанию, брейкпоинты в em подстраиваются, и макет переключается в нужной точке, чего не происходит с px.

Правда бесплатно?

Да, 100% бесплатно. Без регистрации, без подписки и без ограничений использования. Все инструменты Tools123 бесплатны.

Похожие инструменты