SEO Term Definition

Media Query

A CSS media query applies different styles based on device characteristics such as screen width, resolution, or orientation — the foundation of responsive web design.

Reviewed by Alexander Yarovenko · Updated: 2026-06-21

What is a CSS Media Query?

A media query is a CSS technique that applies style rules conditionally based on characteristics of the user's device or viewport — most commonly the screen width. Media queries are the primary tool for building responsive web design, allowing a single HTML page to adapt its layout for phones, tablets, and desktops.

Basic Syntax

/* Applies when viewport width is 768px or less */
@media (max-width: 768px) {
  .sidebar { display: none; }
  .main-content { width: 100%; }
}

/* Applies on wide screens only */
@media (min-width: 1200px) {
  .hero { font-size: 48px; }
}

Common Media Features

width / max-width / min-width — viewport width
height — viewport height
orientation — portrait or landscape
resolution — pixel density (useful for retina displays)
prefers-color-scheme — dark/light mode preference

Why Media Queries Matter for SEO

Google uses mobile-first indexing — it crawls and ranks the mobile version of pages. A site without proper responsive styles (implemented via media queries) will perform poorly on mobile Core Web Vitals, particularly Cumulative Layout Shift (CLS) and Largest Contentful Paint (LCP). Poor mobile UX is a direct ranking signal.

Use the Page Analyzer to check how your pages render at mobile viewport widths and identify CSS issues that affect mobile usability scores.

Back to SEO Glossary