CSS Media Queries

</>

CSS3 Media Queries

Responsive Design Essentials

A comprehensive guide for students on how to use CSS3 Media Queries to create responsive web pages. Includes syntax, breakpoints, media types, practical examples, and best practices.

What Are Media Queries?

Definition & Purpose

Media queries are a CSS technique that allows content to adapt to different conditions such as screen resolution, device type, or browser viewport width.

They are the cornerstone of responsive web design, enabling websites to look and function properly across devices from mobile phones to desktop computers.

Key Benefits

Create device-agnostic websites that work everywhere
Improve user experience by optimizing for different screen sizes
Avoid creating separate websites for mobile and desktop
Enhance SEO performance and accessibility
Future-proof designs for new device types

Basic Example

/* Basic media query syntax */
@media screen and (max-width: 768px) {
  body {
    background-color: lightblue;
    font-size: 14px;
  }
  
  .container {
    width: 100%;
  }
}

Responsive Design

Mobile ≤ 576px

Tablet 577px – 992px

Desktop ≥ 993px

Basic Syntax and Structure

@media Rule Breakdown

The @media rule is used to apply different styles for different devices/screen sizes. It consists of:

Basic Syntax:

@media

mediatype

logial-operator

media-feature:value

{…}

Media Types:

screen (computer screens)
print (printouts)
all (all devices, default)

Logical Operators:

and (combines conditions)
not (negates a query)
only (for older browsers)
, (acts as “or” operator)

Media Features

Viewport Properties:

width, min-width, max-width
height, min-height, max-height
aspect-ratio
orientation (portrait/landscape)

Device Capabilities:

hover (hover capability)
pointer (input precision)
color (color depth)
resolution (pixel density)

Basic Example

/* Simple width-based query */
@media screen and (max-width: 768px) {
  .container {
    width: 100%;
  }
}

/* Query with multiple conditions */
@media screen and (min-width: 768px) 
       and (max-width: 1024px) {
  body {
    font-size: 16px;
  }
}

Modern Range Syntax

/* Using comparison operators */
@media (width <= 768px) {
  /* Mobile styles */
}

/* Width range with inclusive values */
@media (768px <= width <= 1024px) {
  /* Tablet styles */
}

Common Media Types & Features

Media Types

Screen

Computers, tablets, phones, and other screen devices

Print

Print preview mode and printed pages

All

Default type, matches all devices

Viewport Features

width / height

Viewport dimensions

min-width max-width height

aspect-ratio

Ratio of width to height

16/9 4/3

orientation

Device orientation

landscape portrait

resolution

Pixel density of the device

dpi dpcm

Usage Example

/* Print-specific styles */
@media print {
  nav { 
    display: none; 
  }
  
  a {
    text-decoration: none;
    color: black;
  }
}

Advanced Features

hover / pointer

Input mechanism capabilities

@media (hover: hover) {...}
@media (pointer: fine) {...}

prefers-color-scheme

Light/dark mode preference

@media (prefers-color-scheme: dark) {...}
@media (prefers-color-scheme: light) {...}

/* Combined media features example */
@media screen and (min-width: 768px) 
       and (orientation: landscape) 
       and (hover: hover) {
  .menu {
    display: flex;
  }
}

Responsive Design Breakpoints (2024)

Standard Breakpoint Ranges

Extra Small (Mobile): ≤ 576px
Smartphones in portrait mode

Small (Tablets): 577px - 768px
Larger smartphones and small tablets

Medium (Large Tablets): 769px - 1024px
Larger tablets and smaller laptops

Large (Desktops): 1025px - 1440px
Standard desktop monitors

Extra Large (Large Desktops): ≥ 1441px
Large monitors and high-resolution displays

CSS Implementation

/* Mobile First Approach */
/* Base styles for mobile */
.container {
  width: 100%;
}

/* Small (Tablets) */
@media (min-width: 577px) {
  .container {
    width: 540px;
  }
}

/* Medium (Large Tablets) */
@media (min-width: 769px) {
  .container {
    width: 720px;
  }
}

/* Large (Desktops) */
@media (min-width: 1025px) {
  .container {
    width: 960px;
  }
}

/* Extra Large (Large Desktops) */
@media (min-width: 1441px) {
  .container {
    width: 1200px;
  }
}

Mobile-First vs Desktop-First Approaches

Mobile-First Approach

Start with styles for small screens, then add complexity for larger screens using min-width queries.

/* Base styles for mobile */
.container {
  width: 100%;
  padding: 10px;
}

/* Tablet styles */
@media (min-width: 768px) {
  .container {
    width: 750px;
    padding: 20px;
  }
}

/* Desktop styles */
@media (min-width: 1024px) {
  .container {
    width: 970px;
  }
}

Pros

Prioritizes mobile experience (majority of web traffic)
Progressive enhancement philosophy
Generally results in cleaner, lighter CSS
Aligns with Google’s mobile-first indexing

Cons

Can be challenging if desktop design is complex
May require more planning upfront

Desktop-First Approach

Start with styles for large screens, then simplify for smaller screens using max-width queries.

/* Base styles for desktop */
.container {
  width: 1170px;
  padding: 30px;
}

/* Tablet styles */
@media (max-width: 1024px) {
  .container {
    width: 970px;
    padding: 20px;
  }
}

/* Mobile styles */
@media (max-width: 768px) {
  .container {
    width: 100%;
    padding: 10px;
  }
}

Pros

Easier to implement complex desktop designs first
Traditional approach, more familiar to some developers
Can be faster for desktop-focused websites

Cons

Mobile experience may feel like an afterthought
Often leads to overriding styles (more CSS)
Not aligned with current mobile usage trends

Practical Examples: Responsive Layouts

Responsive Navigation Menu

A common pattern is to transform a horizontal navigation into a mobile-friendly hamburger menu:

/* Navigation menu with media query */
.nav-links {
  display: flex;
}

@media (max-width: 768px) {
  .nav-links {
    display: none;
  }
  
  .hamburger {
    display: block;
  }
  
  .nav-links.active {
    display: flex;
    flex-direction: column;
    position: absolute;
    width: 100%;
  }
}

CSS Grid Layout Adaptation

Grid layouts can adapt to different screen sizes without JavaScript:

.grid-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

@media (max-width: 992px) {
  .grid-container {
    grid-template-columns: repeat(2, 1fr);
  }
}

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

Flexbox Card Layout

.card-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.card {
  flex: 0 1 calc(33% - 20px);
  margin-bottom: 20px;
}

@media (max-width: 768px) {
  .card {
    flex: 0 1 calc(50% - 10px);
  }
}

@media (max-width: 576px) {
  .card {
    flex: 0 1 100%;
  }
}

Advanced Media Query Features

Modern Interaction Features

Advanced Examples

hover

Detects if the primary input device can hover over elements

@media (hover: hover) {
  a:hover {
    text-decoration: underline;
  }
}

pointer

Tests the precision of the pointing device

@media (pointer: coarse) {
  button {
    min-height: 48px;
  }
}

/* Combined media queries */
@media (min-width: 768px) and 
       (hover: hover) and
       (pointer: fine) {
  .menu-item {
    opacity: 0.7;
  }
  
  .menu-item:hover {
    opacity: 1;
    transform: scale(1.05);
  }
}

Additional Modern Features

prefers-contrast: Detects if user prefers higher/lower 
contrast
@media (prefers-contrast: high) { ... }

dynamic-range: Checks display's dynamic 
range capability
@media (dynamic-range: high) { ... }

display-mode: Detects web app display mode
@media (display-mode: standalone) { ... }

update: Checks screen update frequency capability
@media (update: slow) { ... }

Best Practices & Common Patterns

Organization Tips

Common Patterns

Organization Tips

Mobile-first approach: Start with base styles for mobile, then use min-width queries for larger screens
Component-based organization: Keep media queries close to their related components
Group by breakpoint: Organize major layout changes by consistent breakpoints
Use preprocessors: Leverage Sass/LESS mixins to simplify media query management

* Reusable breakpoint variables */
:root {
  --mobile: 576px;
  --tablet: 768px;
  --desktop: 1024px;
}

/* Standard mobile-first pattern */
@media (min-width: 576px) { ... }
@media (min-width: 768px) { ... }
@media (min-width: 1024px) { ... }

/* Feature detection pattern */
@media (hover: hover) { ... }

Implementation Guidelines

Use relative units

Prefer rem/em over px for responsive 
typography and layouts

Test on real devices

Browser emulation is not always accurate

Avoid device-specific queries

Focus on viewport dimensions, not specific devices

Summary & Key Takeaways

Key Concepts Recap

Media Query Syntax

@media [media-type] and ([feature]:[value]) { /* CSS rules */ }

Common Media Types

screen, print, all

Essential Media Features

width, height, orientation, aspect-ratio, resolution

Logical Operators

and, not, only, comma (or)

Standard Breakpoints (2024)

Mobile: ≤576px, Tablet: 577px-768px, Desktop: ≥769px

Best Practices

Use mobile-first approach with min-width queries
Keep media queries organized by component
Use relative units (em, rem) for flexible layouts
Test across multiple devices and screen sizes
Combine with CSS Grid/Flexbox for powerful layouts
Consider user preferences (dark mode, reduced motion)

Next Steps

Practice Projects

Convert a fixed-width layout to responsive
Create a responsive navigation menu
Build a portfolio website with advanced media queries
Implement dark mode using prefers-color-scheme