EspañolCSS media query generator (breakpoints)
Choose the breakpoints and the extra queries. Resize the window and see which media queries apply right now.
How to useYour CSS breakpoints, ready to go
Available in: 
CSS media query generator (breakpoints): what it is for
Media queries make the layout change with the screen. This generator builds the CSS skeleton with Bootstrap 5 breakpoints (576, 768, 992, 1200 and 1400 px), Tailwind's (640, 768, 1024, 1280 and 1536 px), a simple set or your own.
Choose mobile-first (min-width), desktop-first (max-width, with the 0.02 px adjustment Bootstrap uses) or ranges, in px or em, and add queries for dark mode, reduced motion, mouse or touch, orientation, print and high contrast. Resize the window to see which media queries apply.
How to use
- Choose the breakpoints and the approach.
- Check the extra queries.
- Copy or download the CSS.
When to use it
- Starting the CSS for a new site.
- Standardizing breakpoints across a team.
- Learning how media queries work.
Frequently asked questions
Mobile-first or desktop-first?
Mobile-first is the most common today: the base CSS is for phones and each min-width adds adjustments for larger screens. That way phones, which usually have weaker connections and processors, read fewer rules. Desktop-first (max-width) does the opposite and is useful for adapting older sites.
Which breakpoints should I use?
Bootstrap 5's are 576, 768, 992, 1200 and 1400 px; Tailwind's are 640, 768, 1024, 1280 and 1536 px. Better than copying a framework is placing the breakpoint where your layout breaks, but both sets are good starting points.
Why use em in media queries?
In media queries, 1em equals the browser's default font size (usually 16 px). If someone has increased the default font, em breakpoints follow along and the layout switches at the right point, which doesn't happen with px.
Is it really free?
Yes, 100% free. No sign-up, no subscription and no usage limits. All Tools123 tools are free and run right in your browser.