UTILS.
100% у браузері
@

Конструктор CSS Media Query

Створіть адаптивний запит @media із пресетами та скопіюйте його.

Про цей інструмент

Складіть адаптивний запит @media, вибравши min-width, max-width або діапазон плюс орієнтацію, з пресетами пристроїв в один клік, потім скопіюйте обгортку. Усе працює у вашому браузері.

Поширені запитання

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

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