What is responsive web design?

A design approach that adapts layout and content to various screen sizes and devices

A design method focused on changing element colors based on specific user interactions

A development strategy used to build native mobile applications for iOS and Android

A front-end JavaScript library used to manage data state across complex components

What is mobile-first design?

Designing the mobile layout first, then adding enhancements for larger screen sizes

Developing a standalone mobile application before starting work on the website

Designing the desktop layout first and then removing features for mobile viewports

Creating a website that only functions on mobile devices and blocks desktop access

What is a media query in CSS?

A CSS rule that applies specific styles based on device width, height, or orientation

A backend query used to fetch image or video files from a cloud-based media server

A JavaScript function used to detect if the user is using a touchscreen or a mouse

A specialized @import rule used to load external font families into a stylesheet

What are common responsive breakpoints?

Standard ranges: Mobile (320-480px), Tablet (768-1024px), and Desktop (1200px+)

Specific screen dimensions that are enforced by all modern web browser engines

A strategy where a unique CSS layout is created for every single physical pixel size

The default pixel widths of the first monitors ever used to display the World Wide Web

What is the meta viewport tag?

An HTML tag that instructs mobile browsers to render the page at the device width

An HTML tag used to define the page title and description for search engine results

A CSS selector used to target elements that are currently visible within the window

A JavaScript property that allows developers to disable zooming on desktop monitors

What is a flexible/fluid layout?

A layout using percentage-based widths that adapt to the size of the parent container

A fixed-width layout that remains at a specific pixel size regardless of the screen

A layout that relies exclusively on the CSS Grid module to define column spacing

A design that uses JavaScript to recalculate element sizes every time the user scrolls

What is max-width in responsive design?

A CSS property that limits an element’s width but allows it to shrink if needed

A property that ensures an element always maintains a minimum width on mobile

A JavaScript command that calculates the widest point of the current HTML document

A browser setting that prevents websites from expanding past the screen boundaries

What is the difference between max-width and width?

width sets a fixed size; max-width allows shrinking if the container is smaller

width is used for mobile design, while max-width is used exclusively for desktop

width controls the inner content, while max-width controls the outer margin space

width is a modern CSS3 property, while max-width is a legacy property from CSS1

A CSS layout module designed for two-dimensional layouts using rows and columns

A specialized HTML element used to create tables for displaying statistical data

A CSS property used to align text horizontally within a specific container or div

A JavaScript library that allows for the dragging and dropping of dashboard widgets

A CSS module for one-dimensional layouts that provides flexible element sizing

A modern replacement for CSS Grid that handles both rows and columns at once

An HTML5 attribute used to create expandable and collapsible accordion menus

A JavaScript API used to animate the movement of boxes across a web page

What is aspect ratio in responsive design?

The ratio of width to height maintained via the aspect-ratio property or padding

The measurement of how many pixels are packed into one physical inch of the screen

A CSS property that forces a webpage to only be viewable in landscape orientation

The relationship between the font size of a heading and the font size of body text

What are responsive images?

The practice of using srcset and sizes to serve the best image size for the device

Images that automatically change their color palette based on the users OS theme

A method of serving the highest resolution image possible to every single visitor

Using JavaScript to hide all images on a page until the user hovers over them

What are container queries in CSS?

A feature that allows elements to be styled based on the width of their parent container

A new type of media query that only applies to websites hosted in cloud containers

A JavaScript function used to validate that all form containers have been filled out

A method for grouping multiple CSS files into a single compressed container for speed

What is the measurement unit "rem"?

A relative unit that scales based on the font-size of the root (html) element

A relative unit that scales based on the font-size of the immediate parent element

An absolute measurement unit that represents exactly 16 physical device pixels

A unit used only for defining line-height in modern responsive typography systems

What is the measurement unit "vw" (viewport width)?

A unit equal to 1% of the viewport width; useful for creating fluid UI elements

A unit that calculates width based on the number of characters in a text string

An absolute pixel measurement that corresponds to the width of a standard monitor

A deprecated CSS unit that has been replaced by percentages in modern development

What is an orientation media query?

A query using (orientation: portrait/landscape) to apply styles based on device view

A setting that forces the users browser to rotate the website by 90 degrees

A JavaScript event that triggers whenever the user physically tilts their mobile phone

A specialized rule that only works when the user is viewing the site on a desktop monitor

What is touch-action in responsive design?

A CSS property that defines how a browser should handle specific touch-based gestures

A JavaScript event listener that fires every time a user touches a button on a screen

An HTML attribute used to increase the size of buttons for users with larger fingers

A browser setting that disables all mouse-based interactions on mobile-friendly sites

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

min-width is for mobile-first enhancement; max-width is for desktop-first reduction

min-width is used for font sizes, while max-width is used for container dimensions

min-width requires JavaScript to function, while max-width is a native CSS property

max-width is the modern standard, while min-width is considered a legacy technique

What are CSS relative units in responsive design?

Units like em, rem, and % that scale based on the context of the root or parent

Absolute pixel measurements that ensure an element is the exact same size on all screens

Units used only for calculating the distance between different HTML files on a server

Mathematical operators like + and - used to calculate the width of a flex container

What is the clamp() CSS function?

A function that sets a fluid value between a defined minimum, preferred, and maximum

A property used to force text into a single line and cut off any overflowing characters

A JavaScript method used to round decimal numbers up to the nearest whole integer

A CSS feature that blocks users from resizing the browser window on desktop screens

What is responsive typography?

Adjusting font sizes dynamically using media queries, relative units, or clamp()

Changing the font family of a website based on the language of the visitor

Using high-resolution images of text instead of standard system font families

A strategy where all text is hidden on mobile devices to save on screen real estate

What is the CSS calc() function?

A function that performs mathematical calculations to determine CSS property values

A JavaScript utility used to sum up the total number of div elements on a page

A method for calculating the server-side load time of a specific CSS stylesheet

A browser feature that automatically calculates the tax for items in a shopping cart

What is CSS Grid auto-fit vs. auto-fill?

auto-fit collapses empty tracks into zero; auto-fill maintains them as empty space

auto-fit is used for image galleries, while auto-fill is used only for text columns

auto-fit requires a fixed height, while auto-fill works only with horizontal widths

They are identical properties that were renamed in the latest CSS specification

What is the gap property in Flexbox and Grid?

A property that sets the specific amount of space between flex or grid items

A property that adds extra padding to the outside of the main parent container

A specialized JavaScript variable used to detect white space in a text string

A deprecated property that has been replaced by the "margin-between" command

What is the difference between max-content and min-content?

max-content avoids wrapping text; min-content forces wrapping to the smallest size

max-content is used for images, while min-content is used exclusively for text

They are browser settings that define the maximum zoom level of a web page

min-content is a legacy property that was replaced by "auto" in modern layouts

What is a typical testing approach for responsive design?

Using browser DevTools, physical devices, and online cross-browser testing tools

Reviewing the code in a text editor to ensure that all media queries are present

Assuming that if a site looks good on a 4K monitor, it will work on a smartphone

Asking users to manually resize their windows and report any visual bugs they see

What are CSS custom properties (variables)?

Variables defined with a -- prefix that can be updated within different media queries

A set of private browser properties that users can access via a hidden menu

A JavaScript-only feature used to store sensitive user data in the browser cache

An older method of writing CSS that has been completely replaced by Sass and Less

What is the purpose of the @supports rule?

A rule that checks for browser support of a CSS feature before applying styles

A rule that automatically downloads the latest version of a browser for the user

A query that detects if the user has a high-speed internet connection available

A command used to contact technical support if the website fails to load correctly

What is the concept of progressive enhancement?

Building core content first, then adding CSS and JS for modern browser features

Designing the most complex features first and then removing them for older browsers

A strategy where a website slowly gets faster the more a user visits it

A method for increasing the price of a service as the user adds more features

What is the mobile viewport measurement in CSS?

Using device-independent pixels (DIPs) to account for varying device pixel ratios

Counting the physical number of light-emitting diodes on a smartphone screen

A JavaScript property that measures the physical weight of the mobile device

An absolute measurement that is always exactly 320px wide on every smartphone

Quizzes

Prev in Web DesignAdvanced CSS: Layouts, Modern Features & Performance

Web Design CSS Frontend

Responsive Web Design: Mobile-First & Breakpoints

Mohammad Abu Mattar20 QuestionsBeginnerPublished: 07 Mar, 2026

Markdown for AI

Responsive Web Design: Mobile-First & Breakpoints

Up to 20 questions, shuffled on every run

Quiz Configuration

Enterto start

Welcome to the Responsive Design Quiz! In today’s mobile-first world, building websites that look great and function well on any device is essential. This quiz will test your knowledge of responsive design principles, including media queries, flexible layouts, and best practices for creating adaptable web experiences. Let’s see how much you know about making the web work for everyone!

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.

What is responsive web design?
AnswerA design approach that adapts layout and content to various screen sizes and devices
What is mobile-first design?
AnswerDesigning the mobile layout first, then adding enhancements for larger screen sizes
What is a media query in CSS?
AnswerA CSS rule that applies specific styles based on device width, height, or orientation
What are common responsive breakpoints?
AnswerStandard ranges: Mobile (320-480px), Tablet (768-1024px), and Desktop (1200px+)
What is the meta viewport tag?
AnswerAn HTML tag that instructs mobile browsers to render the page at the device width
What is a flexible/fluid layout?
AnswerA layout using percentage-based widths that adapt to the size of the parent container
What is max-width in responsive design?
AnswerA CSS property that limits an element’s width but allows it to shrink if needed
What is the difference between max-width and width?
Answerwidth sets a fixed size; max-width allows shrinking if the container is smaller
What is CSS Grid?
AnswerA CSS layout module designed for two-dimensional layouts using rows and columns
What is Flexbox?
AnswerA CSS module for one-dimensional layouts that provides flexible element sizing
What is aspect ratio in responsive design?
AnswerThe ratio of width to height maintained via the aspect-ratio property or padding
What are responsive images?
AnswerThe practice of using srcset and sizes to serve the best image size for the device
What are container queries in CSS?
AnswerA feature that allows elements to be styled based on the width of their parent container
What is the measurement unit "rem"?
AnswerA relative unit that scales based on the font-size of the root (html) element
What is the measurement unit "vw" (viewport width)?
AnswerA unit equal to 1% of the viewport width; useful for creating fluid UI elements
What is an orientation media query?
AnswerA query using (orientation: portrait/landscape) to apply styles based on device view
What is touch-action in responsive design?
AnswerA CSS property that defines how a browser should handle specific touch-based gestures
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
What are CSS relative units in responsive design?
AnswerUnits like em, rem, and % that scale based on the context of the root or parent
What is the clamp() CSS function?
AnswerA function that sets a fluid value between a defined minimum, preferred, and maximum
What is responsive typography?
AnswerAdjusting font sizes dynamically using media queries, relative units, or clamp()
What is the CSS calc() function?
AnswerA function that performs mathematical calculations to determine CSS property values
What is CSS Grid auto-fit vs. auto-fill?
Answerauto-fit collapses empty tracks into zero; auto-fill maintains them as empty space
What is the gap property in Flexbox and Grid?
AnswerA property that sets the specific amount of space between flex or grid items
What is the difference between max-content and min-content?
Answermax-content avoids wrapping text; min-content forces wrapping to the smallest size
What is a typical testing approach for responsive design?
AnswerUsing browser DevTools, physical devices, and online cross-browser testing tools
What are CSS custom properties (variables)?
AnswerVariables defined with a -- prefix that can be updated within different media queries
What is the purpose of the @supports rule?
AnswerA rule that checks for browser support of a CSS feature before applying styles
What is the concept of progressive enhancement?
AnswerBuilding core content first, then adding CSS and JS for modern browser features
What is the mobile viewport measurement in CSS?
AnswerUsing device-independent pixels (DIPs) to account for varying device pixel ratios