CSS Media Query Generator

What are @media Queries in CSS?

@media rules in CSS allow you to apply styles conditionally based on device characteristics, such as screen size, orientation, or user preferences. They are the foundation of responsive web design, enabling your website to adapt seamlessly to mobiles, tablets, desktops, printers, and more.

Without @media, you'd write separate stylesheets for every device. With it, you create flexible, adaptive layouts in a single file.

Basic Syntax

The structure is simple:

@media media-type and (feature: value) {
  /* Your CSS rules here */
}

Examples:

/* Mobile-first: Hide sidebar on small screens */
@media (max-width: 768px) {
  .sidebar { display: none; }
}

Media Types

Specify the device or output:

Type	Description
`all`	Default: All devices
`screen`	Screens (phones, laptops)
`print`	Printers
`speech`	Screen readers

@media print {
  .no-print { display: none; }
  body { font-family: serif; }
}

Common Features & Breakpoints

Width/Height: min-width, max-width
Orientation: portrait or landscape
Resolution: min-resolution: 192dpi (for Retina)

/* Tablet landscape */
@media (min-width: 768px) and (orientation: landscape) {
  .container { display: flex; }
}

Modern Features

Support user preferences and accessibility:

/* Dark mode */
@media (prefers-color-scheme: dark) {
  body { background: #121212; color: #eee; }
}

/* Reduced motion for accessibility */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; }
}

/* Hover support (mouse) */
@media (hover: hover) {
  .card:hover { transform: scale(1.05); }
}

/* Touch devices */
@media (pointer: coarse) {
  button { min-height: 44px; padding: 1rem; }
}

Combining Conditions

Use and, or, not:

@media screen and (min-width: 600px) and (max-width: 900px),
       print and (orientation: portrait) {
  /* Multiple conditions */
}

The @media Generator Tool

To make creating these queries effortless, I've built a 100% Vanilla JS/HTML/CSS Generator. It's a split-panel tool:

Left Panel: Checkboxes, sliders, and dropdowns for media types, widths, orientations, dark mode, etc.
Right Panel: Real-time generated CSS code in a copyable <textarea>.

No libraries, no setup-just copy/paste to your project. Perfect for beginners and pros!

How to Use the Generator?

Copy/paste the full generator HTML code (from previous response) into a file or project you created.
Open it in any browser.
Select options:
- Media type (e.g., screen or print).
- Widths: Check min-width/max-width and set pixels.
- Toggle dark mode, hover, reduced motion, etc.
Watch CSS generate automatically.
Click "Copy CSS" and paste into your stylesheet.

Pro Tip: Combine multiple options for complex queries like @media screen and (max-width: 768px) and (orientation: portrait).

Example Outputs from the Generator

@media screen and (min-width: 1024px) {
  /* Your styles here */
  .container { background: lightblue; }
}

@media (prefers-color-scheme: dark) {
  /* Dark mode */
  body { background: #121212; color: #eee; }
}

Master @media and build responsive sites in minutes. Use generator today and experiment!

Last update: 05. 07. 2025.