Media query generator

Define breakpoints visually — min-width, max-width, ranges, orientation, resolution, hover and motion preferences — and get both mobile-first and desktop-first @media rules plus a breakpoint variable table and @custom-media aliases.

Runs in your browserEvery computation happens in your browser — your data never leaves this device.

Breakpoints

Names may use lowercase letters, digits and hyphens (they end up in CSS variable names). The lower bound becomes the mobile-first min-width; leave the upper bound empty and the desktop-first query uses lower bound − 0.02px so the two never overlap.

NameLower bound (px)Upper bound (px, optional)

Extra conditions

Extra conditions are appended with and to every breakpoint query, e.g. (min-width: 768px) and (hover: hover).

OrientationHover capabilityPointer accuracyColour scheme preferenceMinimum resolution (dppx, empty for any)

Prefers reduced motion

Breakpoint ruler

sm · ≥ 640pxmd · ≥ 768pxlg · ≥ 1024pxxl · ≥ 1280px

Result

Name	Lower bound	Upper bound	Mobile first	Desktop first
sm	640px	—	(min-width: 640px)	(max-width: 639.98px)
md	768px	—	(min-width: 768px)	(max-width: 767.98px)
lg	1024px	—	(min-width: 1024px)	(max-width: 1023.98px)
xl	1280px	—	(min-width: 1280px)	(max-width: 1279.98px)

Mobile first (min-width)

/* sm: ≥640px */
@media (min-width: 640px) {
  /* your styles */
}

/* md: ≥768px */
@media (min-width: 768px) {
  /* your styles */
}

/* lg: ≥1024px */
@media (min-width: 1024px) {
  /* your styles */
}

/* xl: ≥1280px */
@media (min-width: 1280px) {
  /* your styles */
}

Desktop first (max-width)

/* sm: ≤639.98px */
@media (max-width: 639.98px) {
  /* your styles */
}

/* md: ≤767.98px */
@media (max-width: 767.98px) {
  /* your styles */
}

/* lg: ≤1023.98px */
@media (max-width: 1023.98px) {
  /* your styles */
}

/* xl: ≤1279.98px */
@media (max-width: 1279.98px) {
  /* your styles */
}

Breakpoint variables

:root {
  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
}

@custom-media aliases

@custom-media --sm (min-width: 640px);
@custom-media --md (min-width: 768px);
@custom-media --lg (min-width: 1024px);
@custom-media --xl (min-width: 1280px);

What this tool does

Lock in breakpoints before writing a responsive layout: name them, set the widths and copy the mobile-first and desktop-first @media skeletons instead of typing pixel values by hand.
Turn the breakpoints from a design hand-off (640 / 768 / 1024 / 1280) into named breakpoints plus --breakpoint-* custom properties so everyone on the team writes the same queries.
Attach non-width conditions — dark mode, reduced motion, touch devices — to every breakpoint at once and get full queries with prefers-color-scheme, hover and prefers-reduced-motion.
Audit an existing project against the breakpoint table to spot gaps or overlaps between ranges, including the 767.98px edges that desktop-first queries introduce.

Example

Input

Breakpoints: sm = 640px, md = 768px (lower bound only), no extra conditions

Output

Mobile first: @media (min-width: 640px) and @media (min-width: 768px); desktop first: @media (max-width: 639.98px) and @media (max-width: 767.98px); variables: --breakpoint-sm: 640px; --breakpoint-md: 768px;

The desktop-first upper bound is lower bound − 0.02px, so a 640px-wide screen only matches the mobile-first rule.

Frequently asked questions

Should I go mobile-first or desktop-first?

For new work prefer mobile-first (min-width): base styles target narrow screens and each min-width layer adds enhancements, which keeps the cascade small and predictable. Desktop-first (max-width) is handy when a desktop page already exists and mobile styles are being bolted on. Both are generated here, pick one per project.

Why is the desktop-first upper bound 767.98px instead of 768px?

min-width: 768px and max-width: 768px both match at exactly 768px, so which one wins depends on rule order — an easy trap. Subtracting 0.02px makes the two ranges disjoint, which is the convention Bootstrap and friends use.

How do I express a range breakpoint?

Give one breakpoint both a lower bound and an upper bound, for example 600 / 899: mobile-first emits (min-width: 600px) and desktop-first emits (max-width: 899px). With only an upper bound, both writing modes emit (max-width: …), which suits small-screen-only styles.

What are the naming rules?

Lowercase letters, digits and hyphens, starting with a letter — the name is pasted straight into custom property names such as --breakpoint-md and into the rule comments. MD or 2xl will be rejected; md or 2xl-print is fine.

Can I use @custom-media directly?

It is a Media Queries Level 5 draft syntax with no browser support yet, so it needs a build step such as postcss-custom-media to expand into static queries. Without that step, copy the two @media blocks instead.

Keywords：media querymedia query generatorresponsive breakpointsmin-widthmax-widthprefers-reduced-motion媒体查询断点响应式布局移动优先桌面优先CSS 变量

What this tool does

Example

Frequently asked questions

Related tools