Media Query Generator

Create CSS media queries for responsive web design with common breakpoints and features.

Query Builder

Media Type

Feature

Value

Unit

Quick Breakpoints

Common Queries

Mobile First (sm)

Tablet (md)

Desktop (lg)

Large Desktop (xl)

Dark Mode

Light Mode

Reduced Motion

Print

Generated Query

@media screen and (min-width: 768px) {
  /* styles here */
}

Device Reference

Mobile S320px

Mobile M375px

Mobile L425px

Tablet768px

Laptop1024px

Laptop L1440px

4K2560px

Tailwind Breakpoints

sm: 640px

md: 768px

lg: 1024px

xl: 1280px

2xl: 1536px