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 min-width or max-width?

Mobile-first design uses min-width (styles build up from small screens). Desktop-first uses max-width (styles scale down). Mobile-first is the modern standard because it creates lighter base CSS and progressively enhances for larger screens.

CSS Media Query Generator

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.

What are standard breakpoints?

640px (phones), 768px (tablets), 1024px (laptops), 1280px (desktops), 1536px (large screens). But design breakpoints around your content, not devices.

min-width or max-width?

Mobile-first uses min-width (build up from small). Desktop-first uses max-width (scale down). Mobile-first is the modern standard — lighter base CSS, progressive enhancement.

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.

What are the standard responsive breakpoints?+

Common breakpoints are: 480px (small mobile), 768px (tablet/large mobile), 1024px (laptop/tablet landscape), 1200px (desktop), and 1440px (large desktop). These are guidelines, not rules — set breakpoints where your content needs them, not at arbitrary device widths.

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.

📖 Learn More

Built by Derek Giordano · Part of Ultimate Design Tools

Related Tools