CSS Media Queries

What are CSS Media Queries?

Media Queries let you apply different styles depending on the device’s:

Width / height
Screen size
Orientation
Resolution This is how you make a website mobile-friendly or responsive.

@media media-type and (condition) {
  /* CSS rules go here */
}

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

This will apply a blue background only when the screen width is 600px or smaller (mobile/tablet).

Feature	Example	Meaning
max-width	(max-width: 768px)	Up to 768px (phones/tablets)
min-width	(min-width: 1024px)	From 1024px and up (desktops)
orientation	(orientation: landscape)	Wide view (sideways)
resolution	(min-resolution: 2dppx)	High-density displays (retina)

Media Types

Type	Description
all	Default, applies to all
screen	Computer, phone, tablets
print	Print preview & paper
speech	Screen readers

Multiple Conditions

@media screen and (min-width: 600px) and (max-width: 1024px) {
  /* Tablet styles */
}

Example

/* Default style for large screens */
.container {
  width: 1000px;
}

/* For tablets */
@media (max-width: 768px) {
  .container {
    width: 90%;
  }
}

/* For phones */
@media (max-width: 480px) {
  .container {
    width: 100%;
    font-size: 14px;
  }
}

Concept	Use Case
@media	Define conditional CSS
max-width	Apply styles below a width
min-width	Apply styles above a width
Responsive UI	Adapts to phone, tablet, desktop screens

CSS Media Queries

What are CSS Media Queries?

Media Types

Multiple Conditions

Example

On this page