Introduction to CSS Media Queries

Introduction to Media Queries

Media queries are an essential component of modern CSS, allowing styles to be applied based on the characteristics of the user's device. They are the foundation of responsive design, adapting layout and styles to different screen sizes, orientations, or user preferences.

What media queries are and why they matter

Media queries are CSS instructions that test conditions such as screen width, device type, or orientation. If the condition is met, the styles inside the media query are applied.

@media (max-width: 768px) {
  body {
    background-color: #f0f0f0;
  }
}

This example applies a light gray background only if the screen width is at most 768px — ideal for mobile phones.

Their role in responsive design

Responsive design means the site automatically adapts to any screen size. Media queries allow:

Hiding or showing elements depending on the device
Resizing fonts and spacing
Rearranging the layout for optimal experience

Without media queries, a site would look the same on all devices — which can lead to a poor experience on mobile or tablet.

Difference between media types and media features

Media types define the general type of environment:

screen – for screens (desktop, mobile, tablet)
print – for printing
speech – for screen readers

Media features are specific conditions tested within the media query:

max-width, min-width – viewport size
orientation – portrait or landscape
prefers-color-scheme – detects dark/light theme

@media screen and (min-width: 1024px) {
  .sidebar {
    display: block;
  }
}

Here, styles are applied only on screens (screen) with a width of at least 1024px.

Media Queries Syntax

General structure

Media queries use the @media directive followed by a condition and a block of styles. Basic syntax:

@media (condition) {
  /* Styles applied if the condition is true */
}

Simple and clear examples

@media (max-width: 768px) {
  .menu {
    display: none;
  }
}

@media (min-width: 1024px) {
  .container {
    padding: 40px;
  }
}

Keyword Explanation

@media – initiates a media query
and – combines multiple conditions
not – negates the condition
only – prevents application on older browsers (rarely used)

@media only screen and (max-width: 600px) {
  .box {
    background: #eee;
  }
}

@media not screen and (min-width: 800px) {
  .sidebar {
    display: none;
  }
}

🔧 Live Example – Media Query with max-width

<div class="responsive-box">Resize the window</div>

.responsive-box {
  background: #3498db;
  color: white;
  padding: 20px;
  text-align: center;
  border-radius: 6px;
  transition: background 0.3s ease;
}

@media (max-width: 768px) {
  .responsive-box {
    background: #e74c3c;
  }
}

Media Types

Media types: `screen`, `print`, `speech`

Media types define the general environment in which CSS styles are applied. The most common ones are:

screen – for display on screens (desktop, mobile, tablet)
print – for printing (only shown when the page is printed)
speech – for screen readers (rarely used)

These can be combined with media features to apply conditional styles.

When and how to use them

Media types are used to adapt styles based on the display context:

screen: responsive layouts, hiding elements on mobile, etc.
print: removing unnecessary elements when printing (menus, animations)
speech: optimization for screen readers (accessibility)

@media print {
  nav, footer {
    display: none;
  }

  body {
    font-size: 12pt;
    color: black;
  }
}

Example: Different Styles for Print vs. Screen

In the example below, the background is blue on screen and white when printed:

@media screen {
  .box {
    background: #3498db;
    color: white;
  }
}

@media print {
  .box {
    background: white;
    color: black;
    border: 1px solid #000;
  }
}

🔧 Live Example – Different Styles for Print vs. Screen

<div class="box">This box looks different when printed</div>

@media screen {
  .box {
    background: #3498db;
    color: white;
    padding: 20px;
    text-align: center;
    border-radius: 6px;
  }
}

@media print {
  .box {
    background: white;
    color: black;
    border: 1px solid #000;
    padding: 20px;
    text-align: center;
  }
}

Frequently Used Media Features

Popular media features: `max-width` | `min-width` | `orientation` | `prefers-color-scheme`

Media features are specific conditions tested within a media query. The most commonly used ones include:

max-width – applies styles if the viewport width is less than a specified value
min-width – applies styles if the viewport width is greater than a specified value
orientation – detects whether the screen is in portrait or landscape mode
prefers-color-scheme – detects the user's preference for a dark or light theme

`max-width` vs. `min-width`

These two media features are fundamental for responsive design:

max-width: used to apply styles on smaller screens (e.g., phones)
min-width: used to extend styles on larger screens (e.g., desktops)

@media (max-width: 600px) {
  .nav {
    display: none;
  }
}

@media (min-width: 1024px) {
  .nav {
    display: flex;
  }
}

Example: adapting layout based on screen width

In the example below, the layout automatically adjusts depending on the screen size:

.grid {
  display: grid;
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 1024px) {
  .grid {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

🔧 Live Example – Different Styles for Print vs. Screen

<div class="box">This box looks different when printed</div>

@media screen {
  .box {
    background: #3498db;
    color: white;
    padding: 20px;
    text-align: center;
    border-radius: 6px;
  }
}

@media print {
  .box {
    background: white;
    color: black;
    border: 1px solid #000;
    padding: 20px;
    text-align: center;
  }
}

Responsive Design with Breakpoints

What are breakpoints and how to choose them

Breakpoints are layout thresholds defined using media queries, allowing styles to adapt based on screen size. They mark transitions between different design versions: mobile, tablet, desktop, etc.

There's no universal set — breakpoints should be chosen based on the site's content and structure. Ideally, they're based on actual content dimensions, not just device types.

Common breakpoint examples

Here are some commonly used reference values:

320px – 480px: small phones
481px – 768px: large phones / tablets in portrait
769px – 1024px: tablets in landscape
1025px – 1200px: small desktops
1201px+: large desktops / wide monitors

@media (max-width: 768px) {
  .nav {
    flex-direction: column;
  }
}

@media (min-width: 1024px) {
  .nav {
    flex-direction: row;
  }
}

Strategies: mobile-first vs. desktop-first

Mobile-first means that the default styles are for small screens, and media queries progressively enhance the design for larger screens.

.card {
  font-size: 1rem;
}

@media (min-width: 768px) {
  .card {
    font-size: 1.2rem;
  }
}

Desktop-first assumes that the default styles are for desktop screens, and media queries scale them down for mobile devices.

.card {
  font-size: 1.2rem;
}

@media (max-width: 768px) {
  .card {
    font-size: 1rem;
  }
}

🔧 Live Example – Different Styles for Print vs. Screen

<div class="box">This box looks different when printed</div>

@media screen {
  .box {
    background: #3498db;
    color: white;
    padding: 20px;
    text-align: center;
    border-radius: 6px;
  }
}

@media print {
  .box {
    background: white;
    color: black;
    border: 1px solid #000;
    padding: 20px;
    text-align: center;
  }
}

Organizing Media Queries in CSS

Where to place them in the CSS file

Media queries can be placed:

At the end of the CSS file – base styles are defined first, followed by conditional ones
Right after the component they affect – useful for modular styling

/* Base styles */
.button {
  padding: 12px 24px;
  font-size: 1rem;
}

/* Media query at the end */
@media (max-width: 768px) {
  .button {
    font-size: 0.9rem;
  }
}

Logical grouping of styles

Organizing media queries by component or functionality helps maintain clean and scalable code:

Grouping by sections: header, nav, footer
Grouping by breakpoints: mobile, tablet, desktop

/* Grouping by component */
.header { ... }
@media (max-width: 768px) {
  .header { ... }
}

.nav { ... }
@media (max-width: 768px) {
  .nav { ... }
}

Organizing Media Queries in CSS

Separating styles into external files

For large projects, it's recommended to separate styles into dedicated files:

base.css – base styles
responsive.css – media queries and adaptive layout
print.css – styles for printing

<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/responsive.css">
<link rel="stylesheet" href="css/print.css" media="print">

🔧 Live Example – Different Styles for Print vs. Screen

<div class="box">This box looks different when printed</div>

@media screen {
  .box {
    background: #3498db;
    color: white;
    padding: 20px;
    text-align: center;
    border-radius: 6px;
  }
}

@media print {
  .box {
    background: white;
    color: black;
    border: 1px solid #000;
    padding: 20px;
    text-align: center;
  }
}

Practical Examples

Layout that adapts on mobile

A simple layout with two columns on desktop that becomes a single column on mobile:

.layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

@media (max-width: 768px) {
  .layout {
    grid-template-columns: 1fr;
  }
}

🔧 Live Example – Different Styles for Print vs. Screen

<div class="box">This box looks different when printed</div>

@media screen {
  .box {
    background: #3498db;
    color: white;
    padding: 20px;
    text-align: center;
    border-radius: 6px;
  }
}

@media print {
  .box {
    background: white;
    color: black;
    border: 1px solid #000;
    padding: 20px;
    text-align: center;
  }
}

Menu that transforms into a hamburger

A horizontal menu that becomes vertical and hidden on mobile, activated by a button:

.menu {
  display: flex;
  gap: 20px;
}

.menu-toggle {
  display: none;
}

@media (max-width: 768px) {
  .menu {
    display: none;
    flex-direction: column;
  }

  .menu-toggle {
    display: block;
  }

  .menu.active {
    display: flex;
  }
}

🔧 Live Example – Different Styles for Print vs. Screen

<div class="box">This box looks different when printed</div>

@media screen {
  .box {
    background: #3498db;
    color: white;
    padding: 20px;
    text-align: center;
    border-radius: 6px;
  }
}

@media print {
  .box {
    background: white;
    color: black;
    border: 1px solid #000;
    padding: 20px;
    text-align: center;
  }
}

Gallery that shifts from 1 to 4 columns based on screen size

A flexible gallery that automatically adapts to the screen width:

.gallery {
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr;
}

@media (min-width: 600px) {
  .gallery {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 900px) {
  .gallery {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1200px) {
  .gallery {
    grid-template-columns: repeat(4, 1fr);
  }
}

🔧 Live Example – Different Styles for Print vs. Screen

<div class="box">This box looks different when printed</div>

@media screen {
  .box {
    background: #3498db;
    color: white;
    padding: 20px;
    text-align: center;
    border-radius: 6px;
  }
}

@media print {
  .box {
    background: white;
    color: black;
    border: 1px solid #000;
    padding: 20px;
    text-align: center;
  }
}

Testing and Debugging

How to use DevTools to simulate devices

All modern browsers offer Developer Tools (DevTools) that allow you to simulate different screen sizes and devices. In Chrome, Firefox, and Edge, you can access responsive mode like this:

Right-click on the page → Inspect or Inspect Element
Press Ctrl + Shift + I or F12
Enable the Device Toolbar (the phone/tablet icon)

You can select predefined devices (iPhone, iPad, Galaxy, etc.) or enter custom dimensions.

Responsive modes in Chrome, Firefox, Edge

Each browser offers a slightly different experience:

Chrome: Device Toolbar + options for rotation, zoom, throttling
Firefox: Responsive Design Mode + DPI and orientation simulation
Edge: Similar to Chrome, with better integration for Windows testing

In all cases, you can inspect elements, modify styles in real time, and test media queries directly in DevTools.

Detecting style issues

DevTools helps you quickly identify problems related to media queries:

Check if styles inside media queries are being overridden
Use the Computed tab to view active styles
Toggle classes to test responsive behavior

You can even temporarily add media queries directly in DevTools for quick testing.

@media (max-width: 600px) {
  .debug {
    outline: 2px dashed red;
  }
}

🔧 Live Example – Different Styles for Print vs. Screen

<div class="box">This box looks different when printed</div>

@media screen {
  .box {
    background: #3498db;
    color: white;
    padding: 20px;
    text-align: center;
    border-radius: 6px;
  }
}

@media print {
  .box {
    background: white;
    color: black;
    border: 1px solid #000;
    padding: 20px;
    text-align: center;
  }
}

Common Mistakes and How to Avoid Them

Overusing media queries

One of the most frequent mistakes is oversaturating the CSS file with media queries for every tiny variation. This leads to:

Hard-to-maintain code
Style conflicts
Poor performance

Solution: Use well-chosen breakpoints and scalable styles with clamp(), flex, grid.

/* Avoid this */
@media (max-width: 500px) { ... }
@media (max-width: 520px) { ... }
@media (max-width: 540px) { ... }

/* Better */
@media (max-width: 600px) { ... }

Arbitrary breakpoints without testing

Defining breakpoints without testing the layout on real devices or simulations can lead to inconsistent experiences. For example, a breakpoint at 850px might be useless if it doesn't match any real device.

Solution: Test your layout in DevTools and base breakpoints on content, not assumptions.

Lack of a clear responsive design strategy

Without a consistent approach (mobile-first or desktop-first), styles can become contradictory and hard to scale.

Solution: Choose a strategy and apply it consistently. Recommended: mobile-first, with default styles for small screens and media queries for scaling up.

/* Mobile-first */
.card {
  font-size: 1rem;
}

@media (min-width: 768px) {
  .card {
    font-size: 1.2rem;
  }
}

🔧 Live Example – Different Styles for Print vs. Screen

<div class="box">This box looks different when printed</div>

@media screen {
  .box {
    background: #3498db;
    color: white;
    padding: 20px;
    text-align: center;
    border-radius: 6px;
  }
}

@media print {
  .box {
    background: white;
    color: black;
    border: 1px solid #000;
    padding: 20px;
    text-align: center;
  }
}

Recap and Final Exercise

Key Concepts Recap

Media queries allow CSS styles to be applied based on device characteristics
Media types define the general environment: screen, print, speech
Media features test specific conditions: max-width, orientation, prefers-color-scheme
Breakpoints are strategic layout transition points
Mobile-first is the recommended approach for responsive design
DevTools are essential for testing and debugging

Exercise: Build a page with a layout that adapts to 3 screen sizes

The goal is to create a section with 3 boxes that display:

In 1 column on mobile
In 2 columns on tablet
In 3 columns on desktop

.grid {
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 1024px) {
  .grid {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

Challenge: Add different styles for landscape orientation

Use a media query with orientation to dynamically change the style:

@media (orientation: landscape) {
  .grid {
    background: #f1c40f;
  }
}

🔧 Live Example – Different Styles for Print vs. Screen

<div class="box">This box looks different when printed</div>

@media screen {
  .box {
    background: #3498db;
    color: white;
    padding: 20px;
    text-align: center;
    border-radius: 6px;
  }
}

@media print {
  .box {
    background: white;
    color: black;
    border: 1px solid #000;
    padding: 20px;
    text-align: center;
  }
}

🧠 Final Quiz – Media Queries Recap

CSS Flexbox ➔

Introduction to Media Queries

What media queries are and why they matter

Their role in responsive design

Difference between media types and media features

Media Queries Syntax

General structure

Simple and clear examples

Keyword Explanation

Media Types

Media types: screen, print, speech

When and how to use them

Example: Different Styles for Print vs. Screen

Frequently Used Media Features

Popular media features: max-width | min-width | orientation | prefers-color-scheme

max-width vs. min-width

Example: adapting layout based on screen width

Responsive Design with Breakpoints

What are breakpoints and how to choose them

Common breakpoint examples

Strategies: mobile-first vs. desktop-first

Organizing Media Queries in CSS

Where to place them in the CSS file

Logical grouping of styles

Organizing Media Queries in CSS

Separating styles into external files

Practical Examples

Layout that adapts on mobile

Menu that transforms into a hamburger

Gallery that shifts from 1 to 4 columns based on screen size

Testing and Debugging

How to use DevTools to simulate devices

Responsive modes in Chrome, Firefox, Edge

Detecting style issues

Common Mistakes and How to Avoid Them

Overusing media queries

Arbitrary breakpoints without testing

Lack of a clear responsive design strategy

Recap and Final Exercise

Key Concepts Recap

Exercise: Build a page with a layout that adapts to 3 screen sizes

Challenge: Add different styles for landscape orientation

🧠 Final Quiz – Media Queries Recap

Cookie Policy

Media types: `screen`, `print`, `speech`

Popular media features: `max-width` | `min-width` | `orientation` | `prefers-color-scheme`

`max-width` vs. `min-width`