Question 1

What is a CSS media query?

Accepted Answer

A CSS media query applies styles based on device conditions like viewport width, height, orientation, resolution, or user preferences such as dark mode.

Question 2

What are common breakpoints?

Accepted Answer

Common breakpoints: 480px (mobile), 768px (tablet), 1024px (laptop), 1280px (desktop), 1536px (large desktop). Use min-width for mobile-first approach.

Question 3

Mobile-first or desktop-first?

Accepted Answer

Mobile-first uses min-width and starts with base mobile styles, adding styles as viewport grows. Desktop-first uses max-width and starts with desktop styles, reducing for smaller screens.

Question 4

Can I combine multiple conditions?

Accepted Answer

Yes. Use 'and' to combine conditions like @media (min-width: 768px) and (orientation: landscape). You can also use commas for 'or' logic.