CSS Responsive Design – Media Queries Tutorial

What are Media Queries?

Media queries let you apply CSS rules based on device characteristics such as screen width, height, orientation, resolution, and more. They are the cornerstone of responsive web design.

Basic Syntax

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

Common breakpoints:

Mobile: max-width: 599px
Tablet: min-width: 600px and max-width: 899px
Desktop: min-width: 900px

Live Demo

Resize the browser window to see the layout change.

Card 1

Card 2

Card 3

Card 4

Card 5

Card 6

Example: Adaptive Navigation

/* Mobile - vertical menu */
nav ul{
  display:flex;
  flex-direction:column;
}

/* Tablet and up - horizontal menu */
@media (min-width:600px){
  nav ul{
    flex-direction:row;
  }
}