CSS Media Queries

Media Queries let you apply CSS styles only when certain conditions are true (like screen width, height, orientation, or color scheme).

Basic Syntax:

@media (condition) {
  /* CSS rules here */
}

Example:

@media (max-width: 600px) {
  body {
    background: lightblue;
  }

Why Do We Need Media Queries?

Without media queries, your website would look the same on all devices — which is a problem because:

Text may look too small on phones.
Layout may look stretched on desktops.
Some content may not be usable or visible on tablets.

With media queries, we can set breakpoints — points where the design changes to improve usability.

Min-width & Max-width Breakpoints

What Are Breakpoints?

Breakpoints are the specific screen widths where your layout should adapt.

Using min-width (Mobile-First)

Styles apply at and above the defined width.

@media (min-width: 768px) {
  body { font-size: 18px; }
}

<div class="container">
    <div class="box">Box 1</div>
    <div class="box">Box 2</div>
    <div class="box">Box 3</div>
  </div>

.container {
  display: flex;
  flex-direction: column; /* Mobile first */
  gap: 10px;
  padding: 10px;
}

.box {
  background: lightblue;
  padding: 20px;
  text-align: center;
  border-radius: 8px;
}

/* Tablet and above */
@media (min-width: 768px) {
  .container {
    flex-direction: row; /* Horizontal layout */
  }
}

Using max-width (Desktop-First)

Styles apply at and below the defined width.

@media (max-width: 480px) {
  body { font-size: 14px; }
}

<p class="text">Resize the browser to see the text size change for small phones.</p>

.text {
  font-size: 18px;
  color: #333;
}

/* Small phones only */
@media (max-width: 480px) {
  .text {
    font-size: 14px;
    color: #555;
  }
}

Combining Both

@media (min-width: 768px) and (max-width: 1024px) {
  body { background: lightgreen; }
}

Range Syntax (CSS Level 4)

Instead of writing long and conditions, you can use mathematical range syntax.

Example:

/* Traditional way */
@media (min-width: 400px) and (max-width: 800px) { ... }

/* Modern range syntax */
@media (400px <= width <= 800px) { ... }

Note: Some older browsers may not fully support the range syntax, so the traditional method is still widely used.

All Screen Breakpoints

Extra Small Devices (Phones – Portrait)

Simple, single-column layouts, larger tap targets.

Range: 0px – 480px
Devices: Older iPhones, budget Android phones

@media (max-width: 480px) {
  body { font-size: 14px; padding: 8px; }
}

Small Devices (Phones – Landscape / Modern Phones)

Two-column grids possible.

Range: 481px – 767px
Devices: Newer smartphones, phones in landscape

@media (min-width: 481px) and (max-width: 767px) {
  .container { grid-template-columns: 1fr 1fr; }
}

Medium Devices (Tablets – Portrait)

Multi-column layouts, larger navigation.

Range: 768px – 1024px
Devices: iPads, Android tablets

@media (min-width: 768px) and (max-width: 1024px) {
  nav { display: flex; justify-content: space-between; }
}

Large Devices (Tablets – Landscape / Small Laptops)

Desktop-like layouts with sidebars.

Range: 1025px – 1280px
Devices: Tablets in landscape, small laptops

@media (min-width: 1025px) and (max-width: 1280px) {
  .content { grid-template-columns: 1fr 3fr; }
}

Extra Large Devices (Standard Desktops)

Spacious layouts, wide content areas.

Range: 1281px – 1440px
Devices: Common desktop monitors

@media (min-width: 1281px) and (max-width: 1440px) {
  .hero { padding: 80px; font-size: 2rem; }
}

Ultra-Wide Screens (Big Desktops & 4K Displays)

Max-width constraints to prevent overly long text lines.

Range: 1441px and above
Devices: iMacs, 4K monitors, Smart TVs

@media (min-width: 1441px) {
  .container { max-width: 1400px; margin: auto; }
}

Advanced Media Queries

Orientation (landscape vs portrait)

Lets you apply styles based on whether the screen is wide (landscape) or tall (portrait).

@media (orientation: landscape) {
  body { font-size: 18px; }
}

<div class="card">Orientation Test Card</div>

.card {
  padding: 20px;
  background: orange;
  font-size: 16px;
  text-align: center;
  margin: 20px;
  border-radius: 10px;
}

/* Landscape orientation */
@media (orientation: landscape) {
  .card {
    font-size: 20px;
    background: lightgreen;
  }
}

Dark Mode

Detects if the user’s system is set to dark theme and applies matching styles.

@media (prefers-color-scheme: dark) {
  body { background: #121212; color: white; }
}

<h1>Hello World</h1>
<p>This text changes color based on dark mode preference.</p>

body {
  background: white;
  color: black;
  font-family: sans-serif;
  padding: 20px;
}

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

High DPI / Retina Displays

Targets high-resolution screens (like Retina displays) to serve sharper images and styles.

@media (min-resolution: 2dppx) {
  img { content: url("[email protected]"); }
}

<img src="image.png" alt="Normal Image" class="retina">

.retina {
  width: 200px;
  height: auto;
}

/* Retina / high-resolution displays */
@media (min-resolution: 2dppx) {
  .retina {
    content: url('[email protected]');
  }
}