What is a CSS Media Query?

A CSS media query is a technique that allows you to apply different styles based on device characteristics like screen size, resolution, orientation, or color scheme. Media queries are the foundation of responsive web design, enabling websites to adapt their layout and appearance across different devices-from smartphones to desktop monitors. They use the @media rule in CSS to conditionally apply styles only when certain conditions are met.

Tool Description

This tool helps you generate CSS media queries without memorizing complex syntax. Simply select your target media type, specify dimensions, choose device features, and the tool generates the complete @media rule ready to use in your stylesheets. It supports all modern media query features including viewport dimensions, screen orientation, aspect ratios, resolution detection, and color scheme preferences.

Features

  • Media Type Selection: Choose between all, screen, print, or speech media types
  • Dimension Controls: Set minimum and maximum width/height with any CSS unit (px, em, rem, vw, etc.)
  • Device Features: Configure orientation, aspect ratio, resolution, and color scheme preferences