Responsive Design Tutorial

Media queries let you apply different CSS styles based on the device's screen size or features, making your design responsive across desktops, tablets, and phones.

Example: A Box that Changes Based on Screen Size

Resize your browser or open this on different devices to see the box adjust size and font.

How It Works

Quiz: Test Your Knowledge on Media Queries

1. What does the max-width media query do?

It applies styles for screens wider than the specified width. It applies styles for screens narrower than the specified width. It applies styles for screens exactly the specified width.

2. What screen sizes does @media only screen and (max-width: 768px) target?

Small screens like phones. Screens smaller than 768px, like tablets. Large screens like desktops.

3. How do you target a device with a minimum width of 1024px?

@media only screen and (min-width: 1024px) @media only screen and (max-width: 1024px) @media only screen and (width: 1024px)

Responsive Design with Media Queries

Understanding Media Queries

Example: A Box that Changes Based on Screen Size

How It Works

Quiz: Test Your Knowledge on Media Queries