What Is a CSS Media Query?
CSS media queries are conditional rules that apply styles only when specific criteria are met — most commonly screen width. They're the foundation of responsive web design, letting a single codebase adapt to phones, tablets, laptops, and desktops. This tool generates media query syntax with device presets, breakpoint visualizer, and framework-specific breakpoints for Bootstrap, Tailwind, and Material UI.
Mobile-First vs Desktop-First
Mobile-first (min-width) — start with styles for the smallest screen, then add complexity with min-width queries. This is the modern standard because base CSS is lighter and you progressively enhance. Desktop-first (max-width) — start with desktop styles and override downward. Still used in legacy codebases but produces heavier base CSS.
How to Use This CSS Media Query Generator
- Select the target devices — Choose which screen sizes you're targeting — mobile, tablet, laptop, desktop, or wide screen.
- Set breakpoint values — Enter your breakpoint widths in pixels. The tool suggests common values: 480, 768, 1024, 1200, and 1440px.
- Choose the strategy — Select mobile-first (min-width) or desktop-first (max-width) media queries.
- Add your CSS rules — Enter the CSS properties that should change at each breakpoint.
- Copy the media queries — Grab the complete @media blocks, ready to paste into your stylesheet.
Tips and Best Practices
- → Use mobile-first (min-width). Start with mobile styles as the default, then add complexity with min-width media queries. This is the industry standard and results in simpler, more performant CSS.
- → Don't target specific devices. Designing for 'iPhone 15' or 'iPad Pro' is fragile. Use content-based breakpoints — set a breakpoint where your layout actually breaks, not at a device width.
- → Limit to 3–5 breakpoints. Most designs work with 3 breakpoints: mobile (<768px), tablet (768–1024px), and desktop (>1024px). Add more only if your layout genuinely needs them.
- → Consider using CSS clamp() instead. For fluid typography and spacing,
clamp() often replaces the need for media queries entirely. See our CSS Clamp Calculator.
Frequently Asked Questions
What is a CSS media query?
Conditional CSS that applies when screen conditions are met. @media (min-width: 768px) applies styles above 768px. The foundation of responsive design.
How do I choose breakpoints that fit my own content?
The honest answer is that the device-width breakpoints (480, 768, 1024, 1440) are not the right answer for every site — they are a starting point. The better discipline is to resize the actual content of the page in a browser window from 320 pixels wide upward until something visibly breaks (a navigation item wraps awkwardly, a card grid leaves a single orphan, a heading line-breaks ugly), and write the breakpoint at that pixel value. Most sites need three to five breakpoints, not eight, and the values are unique to the layout rather than copied from a framework. Container queries (now widely supported) make a lot of these older media-query patterns unnecessary for component-scoped responsiveness.
When does min-width produce different results than max-width?
When you mix both styles in a single stylesheet without realizing it, or when you nest min and max ranges so they overlap. A min-width 768px rule applies from 768 pixels upward to infinity; a max-width 767px rule applies from zero up to 767. These two complement each other cleanly. The trouble starts when a project mixes mobile-first (min-width chains) and desktop-first (max-width chains) in different stylesheets — the cascade order becomes the deciding factor at every breakpoint boundary, and small refactors silently flip which rule wins. Pick one direction per project and stick with it.
What is a CSS media query?+
A media query is a CSS technique that applies styles conditionally based on device characteristics — primarily viewport width. The syntax @media (min-width: 768px) { ... } applies enclosed styles only when the viewport is 768px or wider. Media queries are the foundation of responsive web design.
When does a desktop-first breakpoint strategy beat a mobile-first one?+
Mobile-first is the established default and is right for almost every greenfield project — you write the smallest-viewport rules unconditionally, then layer in larger-viewport rules with min-width queries. Desktop-first (max-width chains) earns its keep in two specific contexts. First, when you are progressively retrofitting an existing desktop-heavy site for smaller screens without rewriting the entire stylesheet; max-width queries let you cap legacy layout at the right viewport and apply a slimmer set of rules below. Second, on internal tools and admin dashboards where mobile use is rare and the bulk of the design work is happening at desktop sizes; writing the desktop rules first matches how the team actually thinks about the product. Outside those, default to mobile-first.
What is mobile-first vs desktop-first CSS?+
Mobile-first starts with mobile styles as defaults and adds complexity with min-width queries as the screen grows. Desktop-first starts with desktop styles and removes features with max-width queries for smaller screens. Mobile-first is the industry standard because it produces simpler code and loads fewer styles on bandwidth-constrained mobile devices.
What are standard responsive breakpoints?+
Common breakpoints: 640px (small phones), 768px (tablets), 1024px (laptops), 1280px (desktops), 1536px (large screens). Tailwind CSS and Bootstrap use similar values. However, design your breakpoints around your content, not specific devices.
Should I use When does min-width produce different results than max-width?+
When you mix both styles in a single stylesheet without realizing it, or when you nest min and max ranges so they overlap. A min-width 768px rule applies from 768 pixels upward to infinity; a max-width 767px rule applies from zero up to 767. These two complement each other cleanly. The trouble starts when a project mixes mobile-first (min-width chains) and desktop-first (max-width chains) in different stylesheets — the cascade order becomes the deciding factor at every breakpoint boundary, and small refactors silently flip which rule wins. Pick one direction per project and stick with it.
Should I write media queries for screen size or for content needs?+
Use content-driven breakpoints, not device-driven ones. Pick the viewport width at which your layout starts to look bad (a sidebar wraps under the main content, a card grid becomes a single column, a headline overflows) and write the media query there. Hard-coding popular phone or tablet widths makes the design fragile to new device sizes; writing breakpoints where your specific design breaks makes it robust forever.
Built by Derek Giordano · Part of Ultimate Design Tools
Privacy Policy · Terms of Service