Media queries in CSS - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is a media query in CSS?

A media query is a CSS technique that applies styles only when certain conditions about the device or screen are true, like screen width or orientation.

beginner

How do you write a basic media query for screens smaller than 600px?

Use @media (max-width: 600px) { /* CSS rules here */ } to apply styles only when the screen width is 600 pixels or less.

beginner

What does min-width mean in a media query?

min-width means the styles inside the media query apply only if the screen width is at least the specified value.

intermediate

Why are media queries important for accessibility?

They help make websites easier to use on different devices and screen sizes, improving readability and navigation for everyone.

intermediate

What is the difference between max-width and min-width in media queries?

max-width applies styles up to a certain screen width, while min-width applies styles from that width and above.

Which media query applies styles only on screens wider than 800px?

A @media screen and (max-width: 800px)

B @media (max-width: 800px)

C @media (min-width: 800px)

D @media (width: 800px)

The min-width condition applies styles when the screen width is at least 800px.

What does this media query do? @media (max-width: 500px) { ... }

A Applies styles only if screen width is more than 500px

B Applies styles on all devices

C Applies styles only on devices with exactly 500px width

D Applies styles only if screen width is 500px or less

The max-width condition targets screens up to 500px wide.

Which media feature is used to detect device orientation?

A orientation

B aspect-ratio

C resolution

D color

The orientation media feature detects if the device is in portrait or landscape mode.

How can you combine multiple conditions in a media query?

A Using <code>or</code> keyword

B Using <code>and</code> keyword

C Using <code>but</code> keyword

D Using <code>then</code> keyword

The and keyword combines multiple conditions that all must be true.

Which of these is a valid media query for print devices?

A @media print { ... }

B @media screen { ... }

C @media handheld { ... }

D @media all { ... }

The print media type targets printers and print previews.

Explain how media queries help make a website responsive.

Think about how websites look different on phones and computers.

Describe the difference between using min-width and max-width in media queries.

Consider small screens versus large screens.