CSS Responsive Design and Media Queries Quiz
Three drills on responsive design: classic viewport media queries, modern container queries, and using clamp() for fluid typography that scales between breakpoints.
Question Bank
Medium
CSS
3 questions
quiz
css-media-queries
css-responsive-design
css-units
476 views
6
Write a mobile-first card stylesheet: a single column by default, two columns from 640px wide, three columns from 1024px wide. Use min-width media queries.
What problem do container queries solve that viewport media queries cannot? Show a <Card> component that switches to a horizontal layout once its own container is wide enough.
Use clamp() to scale a heading from 1rem at a 320px viewport to 1.5rem at a 1200px viewport, with linear interpolation in between. Show the derivation.