Media Query Generator

Create customized CSS media queries for responsive web design

Create Your Media Query

Query Type

Width-based Height-based Orientation Device-specific

Condition Type

min-width (≥) max-width (≤) Exact Range

Min Width

Max Width

Additional Features

Dark Mode (prefers-color-scheme: dark)

Reduced Motion (prefers-reduced-motion)

Print Media

Generated Media Query

@media (min-width: 768px) and (max-width: 1024px) {
    /* Your styles for devices between 768px and 1024px wide */

}

Include helpful comment

Common Breakpoints

Click any of these common breakpoints to quickly set your media query:

Media Query Examples

Here are common usage examples of media queries for responsive websites. Click any example to use it as a starting point.

Mobile-First Approach

/* Base styles for all devices */
.container {
    width: 100%;
    padding: 15px;
}

/* Tablet and larger */
@media (min-width: 768px) {
    .container {
        padding: 30px;
        max-width: 720px;
        margin: 0 auto;
    }
}

/* Desktop and larger */
@media (min-width: 992px) {
    .container {
        max-width: 960px;
    }
}

Responsive Typography

/* Base typography */
h1 { font-size: 2rem; }
p { font-size: 1rem; }

/* Mobile devices */
@media (max-width: 768px) {
    h1 { font-size: 1.75rem; }
    h2 { font-size: 1.5rem; }
    p { font-size: 0.9rem; }
}

/* Large screens */
@media (min-width: 1200px) {
    h1 { font-size: 2.5rem; }
    h2 { font-size: 2rem; }
    p { font-size: 1.1rem; }
}

Dark Mode Support

/* Light mode (default) */
:root {
    --bg-color: #ffffff;
    --text-color: #333333;
    --accent-color: #0066cc;
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
    :root {
        --bg-color: #121212;
        --text-color: #f0f0f0;
        --accent-color: #4d9fff;
    }
}

body {
    background-color: var(--bg-color);
    color: var(--text-color);
}

Print Styles

/* Screen styles */
.nav, .footer, .sidebar {
    display: block;
}

/* Print styles */
@media print {
    .nav, .footer, .sidebar, .no-print {
        display: none;
    }
    
    a {
        text-decoration: none;
        color: #000;
    }
    
    .container {
        width: 100%;
        margin: 0;
        padding: 0;
    }
    
    body {
        font-size: 12pt;
        line-height: 1.5;
    }
}

Frequently Asked Questions

Media queries are a key component of responsive web design that allow you to apply different CSS styles based on device characteristics such as screen width, height, orientation, or resolution.

They're important because they enable websites to:

Adapt layouts to different screen sizes (phones, tablets, desktops)
Adjust typography for better readability across devices
Modify navigation elements for touch interfaces
Optimize images and media for different resolutions
Provide alternative styles for print and other media types

Without media queries, websites would either be fixed at one size (creating a poor experience on many devices) or would need to be built with multiple separate versions for different devices.

min-width and max-width are two different ways to target screen sizes with media queries, each with their own purpose:

min-width

Targets screens at least as wide as the specified value. Styles apply from this width and up (larger screens).

@media (min-width: 768px) { ... }

"Apply these styles when the screen is 768px wide or wider."

max-width

Targets screens at most as wide as the specified value. Styles apply from this width and down (smaller screens).

@media (max-width: 767px) { ... }

"Apply these styles when the screen is 767px wide or narrower."

Key difference in approach:

Mobile-first approach typically uses min-width queries, starting with base styles for mobile and progressively enhancing for larger screens.
Desktop-first approach typically uses max-width queries, starting with desktop styles and modifying for smaller screens.

Most modern developers prefer the mobile-first approach (using min-width) as it aligns with how the web is increasingly accessed via mobile devices and leads to cleaner, more progressive CSS.

There's no single "correct" set of breakpoints, but here are some widely used approaches:

Common Breakpoint Ranges

Device Category	Typical Width Range	Common Breakpoint
Mobile Phones	320px - 576px	576px
Tablets	577px - 992px	768px
Laptops/Desktops	993px - 1200px	992px
Large Desktops	1201px+	1200px

Popular Framework Breakpoints

Many developers use framework breakpoints for consistency:

Bootstrap 5

xs: < 576px
sm: ≥ 576px
md: ≥ 768px
lg: ≥ 992px
xl: ≥ 1200px
xxl: ≥ 1400px

Tailwind CSS

sm: ≥ 640px
md: ≥ 768px
lg: ≥ 1024px
xl: ≥ 1280px
2xl: ≥ 1536px

Best Practice: Instead of focusing on specific devices, design for content breakpoints where your layout naturally needs to adjust. Test your design and add breakpoints where the layout starts to break.

CSS supports several media types that allow you to target different devices and contexts:

Media Type	Description	Example
`all`	Matches all devices (default)	`@media all { ... }`
`screen`	Computer screens, tablets, phones	`@media screen { ... }`
`print`	Print preview mode & printed pages	`@media print { ... }`
`speech`	Screen readers & speech synthesizers	`@media speech { ... }`

Some older media types like handheld, tv, and projection are deprecated and should be avoided in modern development.

You can also combine media types with features using and:

@media print and (min-width: 768px) { ... }

This would apply styles to print media that is at least 768px wide.

Beyond the classic width and height media features, modern CSS offers several powerful features:

User Preferences

prefers-color-scheme
Detect if user prefers light or dark mode

@media (prefers-color-scheme: dark) { ... }
prefers-reduced-motion
Detect if user prefers minimal animation

@media (prefers-reduced-motion: reduce) { ... }
prefers-contrast
Detect contrast preference

@media (prefers-contrast: high) { ... }

Display Features

display-mode
Detect if app is fullscreen, standalone, etc.

@media (display-mode: standalone) { ... }
orientation
Detect device orientation

@media (orientation: landscape) { ... }
aspect-ratio
Target specific screen proportions

@media (aspect-ratio: 16/9) { ... }

Interaction Features

hover
Detect if device supports hover

@media (hover: hover) { ... }
pointer
Detect input precision level

@media (pointer: fine) { ... }

Container Queries (New!)

Container queries let you style elements based on their container's size, not just the viewport:

.container {
  container-type: inline-size;
}

@container (min-width: 400px) {
  .card { flex-direction: row; }
}

This allows components to be truly responsive regardless of where they're placed in a layout.

Using these modern media features helps create more accessible, responsive websites that adapt not just to screen sizes but to user preferences and device capabilities as well.

About Media Queries

Media queries are a CSS technique that allows you to apply styles conditionally based on device characteristics.

Basic Syntax

@media [media-type] ([media-feature]) {
  /* CSS rules go here */
}

Benefits of Media Queries

Responsive Design: Create layouts that work on any device
Improved UX: Optimize the experience for each screen size
Accessibility: Support user preferences like dark mode
SEO: Mobile-friendly sites rank better in search results

Logical Operators

Media queries support logical operators to create complex conditions:

AND Operator

Use and to combine multiple conditions:

@media (min-width: 768px) and (max-width: 1200px) { ... }

OR Operator

Use comma , to apply styles if any condition is true:

@media (max-width: 600px), (orientation: portrait) { ... }

NOT Operator

Use not to negate a media query:

@media not all and (max-width: 600px) { ... }