--- title: "Responsive Web Design: Mobile-First & Breakpoints" lang: "en" author: "Mohammad Abu Mattar" canonical: https://mkabumattar.com/post/responsive-design-quiz --- [Home](/)›[Quizzes](/quizzes)›[All Categories](/quizzes/categories)›[Web Design](/quizzes/categories/web-design) Quizzes [Prev in Web DesignAdvanced CSS: Layouts, Modern Features & Performance](/quizzes/post/advanced-css-layouts-quiz) [Web Design](/quizzes/categories/web-design)[CSS](/quizzes/categories/css)[Frontend](/quizzes/categories/frontend) # Responsive Web Design: Mobile-First & Breakpoints [Mohammad Abu Mattar](/authors/mohammad-abu-mattar)20 QuestionsBeginnerPublished: 07 Mar 2026 [Markdown for AI(opens in a new tab)](/post/responsive-design-quiz/index.md "Open the plain-Markdown version of this page, for pasting into an AI tool") Series [Advanced Frontend Techniques](/series/advanced-frontend-techniques)1/4 [NextAdvanced CSS: Layouts, Modern Features & Performance](/quizzes/post/advanced-css-layouts-quiz) All posts in this series (4) Quizzes4 1. [Responsive Web Design: Mobile-First & BreakpointsYou are here](/quizzes/post/responsive-design-quiz) 2. [Advanced CSS: Layouts, Modern Features & Performance](/quizzes/post/advanced-css-layouts-quiz) 3. [Async JavaScript: Promises, Async/Await, Event Loop](/quizzes/post/async-javascript-promises-quiz) 4. [Advanced Frontend Patterns: State Management & Performance](/quizzes/post/advanced-frontend-patterns-quiz) ## Responsive Web Design: Mobile-First & Breakpoints Up to 20 questions, shuffled on every run Quiz Configuration Enterto start Welcome to the Responsive Design Quiz! Most traffic now arrives on a phone, so a layout has to hold up on any screen size. This quiz will test your knowledge of responsive design principles, including media queries, flexible layouts, and best practices for creating adaptable web experiences. Good luck! Answer key and explanations20 questions The quiz above draws 20 questions at random from these 30, so a second attempt will not be the same run. Everything in the pool is listed here. 1. What is responsive web design? AnswerA design approach that adapts layout and content to various screen sizes and devices 2. What is mobile-first design? AnswerDesigning the mobile layout first, then adding enhancements for larger screen sizes 3. What is a media query in CSS? AnswerA CSS rule that applies specific styles based on device width, height, or orientation 4. What are common responsive breakpoints? AnswerStandard ranges: Mobile (320-480px), Tablet (768-1024px), and Desktop (1200px+) 5. What is the meta viewport tag? AnswerAn HTML tag that instructs mobile browsers to render the page at the device width 6. What is a flexible/fluid layout? AnswerA layout using percentage-based widths that adapt to the size of the parent container 7. What is max-width in responsive design? AnswerA CSS property that limits an element's width but allows it to shrink if needed 8. What is the difference between max-width and width? Answerwidth sets a fixed size; max-width allows shrinking if the container is smaller 9. What is CSS Grid? AnswerA CSS layout module designed for two-dimensional layouts using rows and columns 10. What is Flexbox? AnswerA CSS module for one-dimensional layouts that provides flexible element sizing 11. What is aspect ratio in responsive design? AnswerThe ratio of width to height maintained via the aspect-ratio property or padding 12. What are responsive images? AnswerThe practice of using srcset and sizes to serve the best image size for the device 13. What are container queries in CSS? AnswerA feature that allows elements to be styled based on the width of their parent container 14. What is the measurement unit "rem"? AnswerA relative unit that scales based on the font-size of the root (html) element 15. What is the measurement unit "vw" (viewport width)? AnswerA unit equal to 1% of the viewport width; useful for creating fluid UI elements 16. What is an orientation media query? AnswerA query using (orientation: portrait/landscape) to apply styles based on device view 17. What is touch-action in responsive design? AnswerA CSS property that defines how a browser should handle specific touch-based gestures 18. What is the difference between min-width and max-width media queries? Answermin-width is for mobile-first enhancement; max-width is for desktop-first reduction 19. What are CSS relative units in responsive design? AnswerUnits like em, rem, and % that scale based on the context of the root or parent 20. What is the clamp() CSS function? AnswerA function that sets a fluid value between a defined minimum, preferred, and maximum 21. What is responsive typography? AnswerAdjusting font sizes dynamically using media queries, relative units, or clamp() 22. What is the CSS calc() function? AnswerA function that performs mathematical calculations to determine CSS property values 23. What is CSS Grid auto-fit vs. auto-fill? Answerauto-fit collapses empty tracks into zero; auto-fill maintains them as empty space 24. What is the gap property in Flexbox and Grid? AnswerA property that sets the specific amount of space between flex or grid items 25. What is the difference between max-content and min-content? Answermax-content avoids wrapping text; min-content forces wrapping to the smallest size 26. What is a typical testing approach for responsive design? AnswerUsing browser DevTools, physical devices, and online cross-browser testing tools 27. What are CSS custom properties (variables)? AnswerVariables defined with a -- prefix that can be updated within different media queries 28. What is the purpose of the @supports rule? AnswerA rule that checks for browser support of a CSS feature before applying styles 29. What is the concept of progressive enhancement? AnswerBuilding core content first, then adding CSS and JS for modern browser features 30. What is the mobile viewport measurement in CSS? AnswerUsing device-independent pixels (DIPs) to account for varying device pixel ratios ## Tags [#Responsive Design](/quizzes/tags/responsive-design)[#Mobile First](/quizzes/tags/mobile-first)[#Media Queries](/quizzes/tags/media-queries)[#CSS](/quizzes/tags/css)[#Web Design](/quizzes/tags/web-design) ## Share [Facebook](https://facebook.com/sharer/sharer.php?u=https%3A%2F%2Fmkabumattar.com%2Fquizzes%2Fpost%2Fresponsive-design-quiz "Share on Facebook")[Twitter](https://twitter.com/intent/tweet/?text=Responsive%20Web%20Design%3A%20Mobile-First%20%26%20Breakpoints&url=https%3A%2F%2Fmkabumattar.com%2Fquizzes%2Fpost%2Fresponsive-design-quiz "Share on Twitter")[LinkedIn](https://www.linkedin.com/shareArticle?mini=true&url=https%3A%2F%2Fmkabumattar.com%2Fquizzes%2Fpost%2Fresponsive-design-quiz&title=Responsive%20Web%20Design%3A%20Mobile-First%20%26%20Breakpoints&summary=Master%20responsive%20design%3A%20mobile-first%20approach%2C%20media%20queries%2C%20flexible%20layouts%2C%20viewport%20settings%2C%20and%20testing.%20Build%20sites%20that%20work%20on%20all%20devices.&source=https://mkabumattar.com "Share on LinkedIn")[WhatsApp](https://wa.me/?text=Responsive%20Web%20Design%3A%20Mobile-First%20%26%20Breakpoints%20https%3A%2F%2Fmkabumattar.com%2Fquizzes%2Fpost%2Fresponsive-design-quiz "Share on WhatsApp")[Telegram](https://t.me/share/url?url=https%3A%2F%2Fmkabumattar.com%2Fquizzes%2Fpost%2Fresponsive-design-quiz&text=Responsive%20Web%20Design%3A%20Mobile-First%20%26%20Breakpoints "Share on Telegram")[Reddit](https://www.reddit.com/submit?url=https%3A%2F%2Fmkabumattar.com%2Fquizzes%2Fpost%2Fresponsive-design-quiz&title=Responsive%20Web%20Design%3A%20Mobile-First%20%26%20Breakpoints "Share on Reddit")[Hacker News](http://news.ycombinator.com/submitlink?u=https%3A%2F%2Fmkabumattar.com%2Fquizzes%2Fpost%2Fresponsive-design-quiz&t=Responsive%20Web%20Design%3A%20Mobile-First%20%26%20Breakpoints "Share on Hacker News")[Pinterest](https://pinterest.com/pin/create/button/?url=https%3A%2F%2Fmkabumattar.com%2Fquizzes%2Fpost%2Fresponsive-design-quiz&media=&description=Master%20responsive%20design%3A%20mobile-first%20approach%2C%20media%20queries%2C%20flexible%20layouts%2C%20viewport%20settings%2C%20and%20testing.%20Build%20sites%20that%20work%20on%20all%20devices. "Share on Pinterest")[Email]() ## Comments Was this useful? ## You might also enjoy More posts on similar topics [![Advanced CSS: Layouts, Modern Features & Performance](/_astro/hero.DDVZErcE_10pL0d.webp)](/quizzes/post/advanced-css-layouts-quiz) ## [Advanced CSS: Layouts, Modern Features & Performance](/quizzes/post/advanced-css-layouts-quiz) - [Mohammad Abu Mattar](/authors/mohammad-abu-mattar) - [Web Design](/quizzes/categories/web-design) - [Frontend](/quizzes/categories/frontend) Welcome to the Advanced CSS Quiz! Test your knowledge of modern CSS features, layout techniques, and performance optimization. This quiz covers CSS Grid, custom properties, animations, transforms, and [#CSS](/quizzes/tags/css)[#Layouts](/quizzes/tags/layouts)[#Performance](/quizzes/tags/performance) [read more](/quizzes/post/advanced-css-layouts-quiz) [![Advanced Frontend Patterns: State Management & Performance](/_astro/hero.SWD1oABZ_ZdB6Yy.webp)](/quizzes/post/advanced-frontend-patterns-quiz) ## [Advanced Frontend Patterns: State Management & Performance](/quizzes/post/advanced-frontend-patterns-quiz) - [Mohammad Abu Mattar](/authors/mohammad-abu-mattar) - [Frontend](/quizzes/categories/frontend) - [Performance](/quizzes/categories/performance) Master advanced frontend architecture: state management (Redux, Zustand), performance optimization, code splitting, lazy loading, and responsive design patterns. [#Frontend](/quizzes/tags/frontend)[#Performance](/quizzes/tags/performance)[#Architecture](/quizzes/tags/architecture) [read more](/quizzes/post/advanced-frontend-patterns-quiz) [![Async JavaScript: Promises, Async/Await, Event Loop](/_astro/hero.DK_l_9BQ_Z2vKlem.webp)](/quizzes/post/async-javascript-promises-quiz) ## [Async JavaScript: Promises, Async/Await, Event Loop](/quizzes/post/async-javascript-promises-quiz) - [Mohammad Abu Mattar](/authors/mohammad-abu-mattar) - [Backend](/quizzes/categories/backend) - [JavaScript](/quizzes/categories/javascript) Welcome to the Async JavaScript quiz! Test your knowledge of Promises, async/await, the event loop, and advanced concurrency patterns. Each question has a hint and detailed explanations for all option [#Async](/quizzes/tags/async)[#JavaScript](/quizzes/tags/javascript)[#Promises](/quizzes/tags/promises) [read more](/quizzes/post/async-javascript-promises-quiz) [![CSS Fundamentals: Selectors, Box Model & Styling](/_astro/hero.BuNubOK1_Z1Tx9uc.webp)](/quizzes/post/css-fundamentals-quiz) ## [CSS Fundamentals: Selectors, Box Model & Styling](/quizzes/post/css-fundamentals-quiz) - [Mohammad Abu Mattar](/authors/mohammad-abu-mattar) - [CSS](/quizzes/categories/css) - [Frontend](/quizzes/categories/frontend) - [Quizzes](/quizzes/categories/quizzes) Welcome to the CSS Fundamentals quiz! This quiz will test your knowledge of CSS basics, including selectors, the box model, properties, and layout techniques. Each question reinforces one concept so y [#Css](/quizzes/tags/css)[#Css fundamentals](/quizzes/tags/css-fundamentals)[#Selectors](/quizzes/tags/selectors)+11 tags [read more](/quizzes/post/css-fundamentals-quiz) [![Vue.js Fundamentals: Reactive Components & Templates](/_astro/hero.DABD39Tr_eJkL.webp)](/quizzes/post/vuejs-fundamentals-quiz) ## [Vue.js Fundamentals: Reactive Components & Templates](/quizzes/post/vuejs-fundamentals-quiz) - [Mohammad Abu Mattar](/authors/mohammad-abu-mattar) - [Frontend](/quizzes/categories/frontend) - [Vue.js](/quizzes/categories/vuejs) - [JavaScript](/quizzes/categories/javascript) Welcome to the Vue.js Basics Quiz! Vue.js is a progressive JavaScript framework for building user interfaces. Whether you're creating a simple interactive widget or a complex single-page application, [#Vue.js](/quizzes/tags/vuejs)[#Components](/quizzes/tags/components)[#Reactive](/quizzes/tags/reactive)+1 tags [read more](/quizzes/post/vuejs-fundamentals-quiz) [![React Fundamentals: Components, Hooks & State Management](/_astro/hero.x4gPhQ21_Z2if49G.webp)](/quizzes/post/react-fundamentals-quiz) ## [React Fundamentals: Components, Hooks & State Management](/quizzes/post/react-fundamentals-quiz) - [Mohammad Abu Mattar](/authors/mohammad-abu-mattar) - [Frontend](/quizzes/categories/frontend) - [React](/quizzes/categories/react) - [JavaScript](/quizzes/categories/javascript) Welcome to the React Fundamentals Quiz! This quiz will test your knowledge of core React concepts, including components, JSX, hooks, state management, props, and event handling. Whether you're new to [#React](/quizzes/tags/react)[#Components](/quizzes/tags/components)[#Hooks](/quizzes/tags/hooks)+2 tags [read more](/quizzes/post/react-fundamentals-quiz) 6 related posts