Mobile-first approach in CSS - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is the mobile-first approach in web design?

It means designing the website starting with the smallest screen (mobile) first, then adding styles for bigger screens like tablets and desktops.

beginner

Why is mobile-first approach important?

Because most people use phones to browse the web, so starting with mobile ensures the site works well on small screens and loads faster.

intermediate

How do you write a CSS media query for mobile-first design?

Start with base styles for mobile, then use @media (min-width: 768px) to add styles for larger screens.

beginner

What does min-width mean in a media query?

It means the styles inside the media query apply only if the screen is at least that wide, so bigger than or equal to that width.

beginner

Give an example of a simple mobile-first CSS snippet.

Base styles for mobile:<br>body { font-size: 1rem; }<br>Then for tablets and up:<br>@media (min-width: 768px) { body { font-size: 1.25rem; } }

What does the mobile-first approach focus on?

A Designing for small screens first

B Designing for desktop screens first

C Ignoring mobile devices

D Using only fixed widths

Mobile-first means starting design with small screens like phones before bigger screens.

Which CSS media query is used in mobile-first design to target larger screens?

A @media (max-width: 768px)

B @media (min-width: 768px)

C @media screen and (orientation: landscape)

D @media (max-height: 600px)

In mobile-first, we use min-width to add styles for screens wider than the mobile size.

Why start with mobile styles first?

A Because desktop users are fewer

B Mobile screens are bigger

C Mobile devices have faster internet

D To ensure good experience on small screens

Starting with mobile ensures the site works well on small screens where space is limited.

What happens if you use max-width instead of min-width in media queries for mobile-first?

A You target bigger screens first

B You target only landscape mode

C You target smaller screens first

D You target all screens

max-width targets screens smaller than or equal to the value, which is opposite of mobile-first.

Which unit is better for responsive font sizes in mobile-first CSS?

A rem

B pt

C px

D cm

rem units scale better with user settings and are preferred for responsive design.

Explain the mobile-first approach and why it is useful in web design.

Think about how most people use the web today.

Describe how to write a CSS media query for mobile-first design.

Remember, mobile-first means adding styles as screen size grows.