Генератор медіа-запитів 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, або відправте його прямо на введення іншого інструменту, щоб продовжити роботу.