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
  • Custom Conditions: Add any custom media feature like hover capability or pointer type
  • Logical Operators: Combine conditions using AND, OR, or NOT operators for complex queries
  • Live Preview: See generated CSS code update in real-time as you adjust settings
  • Common Breakpoints Reference: Quick access to standard breakpoints for mobile, tablet, desktop, and special features

Use Cases

  • Creating responsive layouts that adapt to different screen sizes
  • Targeting specific devices like tablets or smartphones
  • Implementing dark mode and light mode themes
  • Optimizing print stylesheets
  • Detecting high-resolution (retina) displays
  • Adjusting layouts based on device orientation
  • Building mobile-first or desktop-first responsive designs
  • Testing and learning CSS media query syntax