Breakpoints in CSS - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is a breakpoint in CSS?

A breakpoint is a specific screen width where the layout or style of a webpage changes to better fit the screen size. It helps make websites look good on phones, tablets, and desktops.

beginner

How do you write a simple CSS media query for a breakpoint at 600px?

You write:

@media (max-width: 600px) { /* CSS rules here */ }

This means the CSS inside applies when the screen is 600 pixels wide or smaller.

beginner

Why are breakpoints important for responsive design?

Breakpoints let your website adjust its layout and style for different screen sizes. This makes your site easy to use on phones, tablets, and big screens without zooming or scrolling sideways.

intermediate

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

max-width applies styles when the screen is smaller than or equal to a size. min-width applies styles when the screen is larger than or equal to a size. They help target different device sizes.

beginner

Give an example of a common breakpoint width used in CSS.

A common breakpoint is 768px, which often targets tablets. For example: <pre>@media (min-width: 768px) { /* tablet and larger styles */ }</pre>

What does this media query do?

@media (max-width: 480px) { ... }

A Applies styles on screens taller than 480px

B Applies styles when the screen is wider than 480px

C Applies styles only on screens exactly 480px wide

D Applies styles when the screen is 480px wide or smaller

max-width means the styles apply when the screen width is less than or equal to 480 pixels.

Which CSS feature is used to create breakpoints?

A Media queries

B Grid

C Flexbox

D Animations

Media queries let you apply CSS rules based on screen size, which is how breakpoints work.

If you want styles to apply only on large screens, which media query would you use?

A @media (max-width: 600px)

B @media (min-width: 1024px)

C @media (max-height: 800px)

D @media (orientation: landscape)

min-width: 1024px applies styles when the screen is at least 1024 pixels wide, targeting large screens.

What is the main goal of using breakpoints in web design?

A To add animations

B To make websites load faster

C To make websites look good on different screen sizes

D To change font colors

Breakpoints help adjust layouts so websites look good on phones, tablets, and desktops.

Which unit is commonly used in breakpoints for media queries?

A px (pixels)

B em

C %

D vh

Pixels (px) are the most common unit for defining breakpoint widths.

Explain what a breakpoint is and why it is useful in web design.

Think about how websites change on phones versus desktops.

Describe how to write a media query for a breakpoint at 768px and what it means.

Use @media and max-width or min-width with 768px.