Генератор CSS Media Query
Создайте блок @media query CSS из предустановки точки разбиения (или пользовательской ширины) и типа условия — оборачивает ваши CSS-правила в готовый блок для вставки.
Ввод
Вставьте CSS-правила, которые вы хотите обернуть в блок @media — оставьте как есть для комментария-заполнителя.
Вывод
Другие способы использовать этот инструмент
REST API
curl -X POST https://api.iotools.cloud/v1/tool/css-media-query-generator \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"breakpointPreset": "tablet",
"customWidth": "320",
"conditionType": "min-width",
"cssContent": "color: red;"
}'Подставьте свой собственный ключ из аккаунта. Поля инструмента — это тело запроса, без обёртки.
Спросите у ИИ-агента
Use the IOTools `css-media-query-generator` tool (CSS Media Query Generator) on this input:
YOUR_INPUT_HEREВставьте это любому агенту, подключённому к MCP-серверу IOTools, и добавьте свой ввод.
Виджет для встраивания
<iframe
src="https://iotools.cloud/embed/css-media-query-generator/"
width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
title="Генератор CSS Media Query — iotools.cloud"
sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
allow="clipboard-write"
style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>Вставьте это на свою страницу — бесплатно, без ключа, нужна лишь обратная ссылка.
| Стоимость вызова API/MCP | От 5 кредитов |
|---|---|
| Нужно больше кредитов? | Посмотреть тарифы |
Также доступно через
Руководства
Что он делает
Генератор CSS Media Query создаёт готовый к вставке блок @media (...) { } из ширины точки разбиения и типа условия. Выберите общую предустановку устройства (или установите пользовательскую ширину в пикселях), выберите, должен ли запрос применяться выше или ниже этой ширины — или переключитесь на проверку ориентации — и вставьте CSS-правила, которые хотите обернуть. Инструмент мгновенно обновляет результат при изменении любого параметра.
Что такое CSS media query
Media query позволяет таблице стилей применять разные правила в зависимости от ширины viewport, высоты, ориентации или других характеристик. Базовая форма выглядит так:
@media (min-width: 768px) {
/* правила, применяемые только при ширине 768px и более */
}Media query — это основа адаптивного дизайна: вместо того чтобы доставлять один фиксированный макет, вы пишете базовый макет и затем переопределяете определённые свойства, когда viewport выходит за пределы точки разбиения.
Распространённые точки разбиения
Не существует единой официальной шкалы точек разбиения — разные фреймворки (Bootstrap, Tailwind, Material Design) определяют свои собственные — но широко используемая универсальная шкала выглядит так:
- Мобильный — 480px (смартфоны малого размера и выше)
- Планшет — 768px (планшеты и малые ноутбуки)
- Ноутбук — 1024px (ноутбуки и мониторы рабочего стола малого размера)
- Рабочий стол — 1280px (стандартные мониторы рабочего стола и выше)
Выберите «Пользовательский», если ваш проект использует другую шкалу.
Как её использовать
- Выберите Предустановку точки разбиения (Мобильный, Планшет, Ноутбук, Рабочий стол) или выберите Пользовательский и введите свою ширину в пикселях.
- Выберите Тип условия:
- Min-width — mobile-first, применяется при точке разбиения и выше.
- Max-width — desktop-first, применяется при точке разбиения и ниже.
- Ориентация: портрет/пейзаж — применяется на основе ориентации viewport вместо его ширины (точка разбиения игнорируется для этих).
- Вставьте CSS-правила, которые вы хотите обернуть, в CSS для обёртывания — оставьте комментарий-заполнитель, если вам нужна только пустая оболочка
@media. - Скопируйте или загрузите созданный блок из результата и вставьте его в вашу таблицу стилей.
FAQ
В чём разница между min-width и max-width?
min-width — это «mobile-first»: вы пишете базовые стили для малых экранов, а затем добавляете переопределения, которые вступают в силу, когда экран имеет ширину не менее точки разбиения. max-width — это «desktop-first»: переопределение применяется, когда экран имеет ширину не более точки разбиения — более традиционный подход до того, как mobile-first стал общепринятым.
Могу ли я объединить min-width и max-width для диапазона?
Этот инструмент создаёт одно условие за раз. Для диапазона (например «только между 768px и 1023px») создайте версию max-width при 1023px и версию min-width при 768px и объедините их вручную с помощью and:
@media (min-width: 768px) and (max-width: 1023px) { ... }.
Почему поле точки разбиения ничего не делает, когда я выбираю ориентацию? Запросы ориентации реагируют на соотношение сторон viewport, а не на его ширину, поэтому значение точки разбиения не является частью созданного условия — имеет значение только выбор портрета/пейзажа.
Этот инструмент что-то хранит или загружает? Нет. Всё работает локально в вашем браузере — CSS, который вы вставляете, никогда не покидает ваше устройство.