Build CSS media queries visually — pick device presets, set breakpoints, toggle orientation and accessibility features, then copy the generated @media code straight into your stylesheet.

Approach

Device Presets

Width & Height

px
px
px
px

Media Features

<label class="mq-feature-chip" id="mqChipScreen" onclick="mqToggleChip('mqChipScreen','mqFeatScreen')">
  <span class="mq-feature-dot"></span>
  <input type="checkbox" id="mqFeatScreen">
  screen
</label>

<label class="mq-feature-chip" id="mqChipPrint" onclick="mqToggleChip('mqChipPrint','mqFeatPrint')">
  <span class="mq-feature-dot"></span>
  <input type="checkbox" id="mqFeatPrint">
  print
</label>

<label class="mq-feature-chip" id="mqChipOrient" onclick="mqToggleChip('mqChipOrient','mqFeatOrient')">
  <span class="mq-feature-dot"></span>
  <input type="checkbox" id="mqFeatOrient">
  orientation:
  <select class="mq-chip-select" id="mqOrientVal" onclick="event.stopPropagation()">
    <option value="portrait">portrait</option>
    <option value="landscape">landscape</option>
  </select>
</label>

<label class="mq-feature-chip" id="mqChipColor" onclick="mqToggleChip('mqChipColor','mqFeatColor')">
  <span class="mq-feature-dot"></span>
  <input type="checkbox" id="mqFeatColor">
  prefers-color-scheme:
  <select class="mq-chip-select" id="mqColorVal" onclick="event.stopPropagation()">
    <option value="dark">dark</option>
    <option value="light">light</option>
  </select>
</label>

<label class="mq-feature-chip" id="mqChipMotion" onclick="mqToggleChip('mqChipMotion','mqFeatMotion')">
  <span class="mq-feature-dot"></span>
  <input type="checkbox" id="mqFeatMotion">
  prefers-reduced-motion:
  <select class="mq-chip-select" id="mqMotionVal" onclick="event.stopPropagation()">
    <option value="reduce">reduce</option>
    <option value="no-preference">no-preference</option>
  </select>
</label>

Live Viewport Match

Viewport: — × — No query generated yet

Generated CSS

/* Your @media query will appear here */

Quick Reference — Common Breakpoints

NameFrameworkBreakpointTypical Device
xsBootstrap< 576pxSmall phones
smBootstrap≥ 576pxPhones landscape
mdBootstrap≥ 768pxTablets portrait
lgBootstrap≥ 992pxTablets landscape / small laptop
xlBootstrap≥ 1200pxDesktop HD
xxlBootstrap≥ 1400pxWide desktop
smTailwind≥ 640pxPhones landscape
mdTailwind≥ 768pxTablets
lgTailwind≥ 1024pxLaptop / large tablet
xlTailwind≥ 1280pxDesktop
2xlTailwind≥ 1536pxWide / 4K
mobileCustom< 768pxPhones (portrait + landscape)
tabletCustom768px–1199pxTablets all orientations
desktopCustom≥ 1200pxLaptop / desktop monitor
4kCustom≥ 2560pxUltra-wide / 4K displays

Related Tools

□ CSS Flexbox Generator ▣ CSS Grid Generator 📺 Screen Resolution Checker

How to Use the Generator

  1. Choose your approach — Mobile-first outputs min-width queries that scale up; desktop-first uses max-width to scale down.
  2. Pick a device preset or enter custom min/max width and height values.
  3. Toggle media features — add orientation, prefers-color-scheme, prefers-reduced-motion, or print.
  4. Click Generate @media Query to see the code and the live viewport match status.
  5. Click Copy CSS and paste into your stylesheet.

When to Use Mobile-First vs. Desktop-First

Mobile-FirstDesktop-First
Base styles targetSmallest screensLargest screens
Query typemin-widthmax-width
Progressive enhancementYesNo
Framework alignmentTailwind, Bootstrap 4+Older frameworks

Best practice: mobile-first is the modern default. It reduces specificity conflicts and keeps base styles lean.

How prefers-color-scheme Works

/* Apply dark styles only when the OS is in dark mode */
@media screen and (prefers-color-scheme: dark) {
  body {
    background: #0f172a;
    color: #e2e8f0;
  }
}

Pair this with a CSS custom-property theme to avoid duplicating declarations.

prefers-reduced-motion — Accessibility

Users who have vestibular disorders or motion sensitivity can request reduced animations at the OS level. Always respect it:

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}