IconVault logoIconVault
Sign in

Media Query Builder - Free CSS Breakpoint Generator | IconVault

Compose responsive breakpoints with device presets and get a commented CSS media query skeleton to copy. Free, in your browser.

All tools

Media Query Builder

Responsive breakpoint skeleton with device presets

5 of 5 free uses left

Device presets

Breakpoints (4)

5 of 5 free copies left - everything runs in your browser.

/* Mobile (0 - 480px) */
@media (max-width: 480px) {
  /* Add your Mobile styles here */
}

/* Tablet (481px - 1023px) */
@media (min-width: 481px) and (max-width: 1023px) {
  /* Add your Tablet styles here */
}

/* Laptop (1024px - 1439px) */
@media (min-width: 1024px) and (max-width: 1439px) {
  /* Add your Laptop styles here */
}

/* Desktop (1440px - up) */
@media (min-width: 1440px) {
  /* Add your Desktop styles here */
}

About this tool

IconVault's Media Query Builder writes your responsive CSS skeleton for you. Name each breakpoint, set optional min and max widths, or load device presets for mobile, tablet, laptop and desktop, and it generates a clean, commented set of @media rules you can paste straight into your stylesheet.

Add and remove breakpoints freely, and copy the finished CSS in one click. Everything runs fully in your browser with nothing uploaded. It is free to try (repeated use may ask for Pro).

Frequently asked questions

Popular searches

media query generatorcss media query builderresponsive breakpoint generatorfree media query toolmedia query creator onlinecss breakpoint generatorbuild media queries onlinemedia query code generatorresponsive css generatormobile tablet desktop breakpointsstandard css breakpointscommon media query breakpoints480px 768px 1024px 1280px media queriesmobile first media querydesktop first media querymin-width max-width generatormedia query syntax helperhow to write media queriescss responsive design toolresponsive web design helpermedia query templatemedia query boilerplatecss skeleton generatorcommented css media queriescopy paste media queriesmedia query for mobile phonesmedia query for tabletsmedia query for laptopsmedia query for large screensbreakpoint manager csscustom breakpoints cssmedia query cheat sheetcss media query examplesresponsive design breakpoints guidedevice width media queriesscreen size media queriesviewport breakpoint toolcss @media generatormedia screen generatorfree css tools onlinefrontend developer toolsweb design helper toolsmedia query generator no signupbrowser media query buildercss tools free onlineresponsive layout helperbreakpoint css generatorcss media query skeletonresponsive stylesheet startermobile responsive css generator

More tools

Code Playground

Write HTML, CSS & JS with live preview.

JSON Formatter

Beautify, validate & minify JSON.

Base64 Encoder

Encode & decode text and files.

JWT Decoder

Inspect tokens without sending them anywhere.

Coming soon

CLI

Coming soon

Figma plugin

Coming soon

VS Code extension

Coming soon

Chrome extension

Coming soon

AI icon generator

Coming soon

Team workspaces

Coming soon

View all 10+ tools →