Responsive Web Design Beginner Quiz
30 questions on Responsive Web Design.
Question 1: Which CSS feature is primarily used to adapt page layouts based on target screen width or device capabilities?
- A. PHP
- B. SQL
- C. Media Queries β (correct answer)
- D. XML
Explanation: Media queries are a core component of responsive web design (RWD). They allow developer stylesheets to apply different CSS rules depending on viewport size, pixel density, or device orientations.
Question 2: What does the viewport meta tag (<meta name="viewport" content="...">) do?
- A. Enhances search engine indexing
- B. Instructs mobile browsers to render the website layout relative to the device width, preventing automatic zooming or shrinking β (correct answer)
- C. Renders background vectors
- D. Secures local session files
Explanation: Without the viewport meta tag (specifically width=device-width, initial-scale=1.0), mobile browsers will simulate a wide 980px desktop window and shrink the entire page, making text unreadably tiny.
Question 3: Which design philosophy advises designing layout interfaces starting with the smallest screens (mobile) first and adding complexity for larger screens?
- A. Graceful Degradation
- B. Mobile-First Design β (correct answer)
- C. Desktop-First Design
- D. Static Layout Design
Explanation: Mobile-first design is a progressive enhancement strategy. You start with standard simple mobile styles and then leverage media queries with min-width to expand layout features for desktop screens.
Question 4: What will be the behavior of this CSS class?
``css
.card {
width: 100%;
max-width: 600px;
}
``
- A. The card remains fixed at 600px width on all screens
- B. The card spans 100% width on smaller mobile screens, but stops expanding beyond 600px on wider screens β (correct answer)
- C. Compiler Error
- D. Hides the card elements
Explanation: Combining a fluid width 100% with max-width: 600px represents fluid responsive styling. It adapts cleanly inside small viewports and prevents excessive stretching on desktop.
Question 5: Which CSS layout model is designed as a powerful 1-dimensional layout tool, handling elements in either a single row or single column?
- A. CSS Grid
- B. Flexbox β (correct answer)
- C. Float
- D. Table
Explanation: Flexbox (Flexible Box Layout) is a 1-dimensional layout model. It excels at distributing space and aligning items inside a single row or column. CSS Grid is 2-dimensional (handling both rows and columns simultaneously).
Question 6: Which CSS layout model is natively designed as a 2-dimensional layout tool, managing both columns and rows simultaneously?
- A. Flexbox
- B. Float
- C. CSS Grid β (correct answer)
- D. Absolute Positioning
Explanation: CSS Grid is a 2-dimensional grid-based layout system. It lets you align items into exact rows and columns concurrently, making it ideal for complete website layout structures.
Question 7: What does the "em" unit represent in CSS?
- A. Absolute size of 10 pixels
- B. Relative sizing based on the font size of the parent element β (correct answer)
- C. Sizing relative to browser viewport width
- D. Percentage of body height
Explanation: em is a relative unit. 1em is equal to the font-size of the element's direct parent. rem stands for "root em" and is relative to the root <html> font-size.
Question 8: What does the "rem" unit stand for in CSS?
- A. Relative Element Measure
- B. Root Em β (correct answer)
- C. Real Element Metric
- D. Ratio Em
Explanation: rem units are relative to the root <html> font size (which is typically 16px by default in all major browsers). 1.5rem resolves to 24px (1.5 * 16px).
Question 9: Which CSS property guarantees that images scale fluidly inside parent containers without overflowing or losing aspect ratio?
- A.
img { width: 100%; height: auto; } β (correct answer)
- B.
img { width: auto; height: 100%; }
- C.
img { position: relative; }
- D.
img { display: inline-block; }
Explanation: Setting width: 100% expands the image to fill its parent container width, and height: auto maintains the original image proportion/aspect ratio, preventing squishing.
Question 10: What will be the output of this CSS media query rule?
``css
@media (min-width: 768px) {
.sidebar {
display: block;
}
}
``
- A. The sidebar is displayed on screens that are 768px wide OR wider β (correct answer)
- B. The sidebar is hidden on screen widths above 768px
- C. The sidebar displays only on mobile
- D. Compiler Error
Explanation: min-width: 768px targets viewports that are at least 768px wide (tablet/desktop sizes). On smaller viewports, the style inside this query is ignored.
Question 11: Which CSS property sets the alignment of grid items inside a CSS Grid container along the inline (horizontal) axis?
- A. align-items
- B. justify-items β (correct answer)
- C. place-content
- D. flex-direction
Explanation: Inside CSS Grid, justify-items aligns individual grid items along the horizontal inline axis. align-items aligns them along the vertical block axis.
Question 12: What is a breakpoint in responsive design?
- A. A server error crash
- B. A specific viewport width defined in CSS media queries where the website layout shifts to adapt to the screen size β (correct answer)
- C. An HTML page divider tag
- D. A database boundary
Explanation: Breakpoints are threshold viewport sizes (like 480px, 768px, 1024px) where design layouts adapt using media queries to accommodate different devices (mobile, tablet, desktop).
Question 13: Which value of the display property creates an inline-level grid container?
- A. grid
- B. inline-grid β (correct answer)
- C. flex-grid
- D. display-grid
Explanation: display: grid generates a block-level grid container. display: inline-grid generates an inline-level grid container.
Question 14: Which viewport unit represents 1% of the height of the browser viewport?
- A. vw
- B. vh β (correct answer)
- C. %
- D. vmin
Explanation: vh stands for viewport height. 100vh represents 100% of the browser's viewport height. vw stands for viewport width.
Question 15: What is "fluid layout" in web design?
- A. A layout built with constant pixel measurements
- B. A layout designed using percentages and relative units (%, em, rem) that scales dynamically to match any screen resolution β (correct answer)
- C. A site showing video animations
- D. A server-side redirect script
Explanation: Fluid layouts use flexible relative units instead of rigid fixed-pixel values, allowing columns and containers to expand and contract to match any client screen width.
Question 16: What is the difference between min-width and max-width media queries?
- A.
min-width targets screens *at or wider* than the specified size; max-width targets screens *at or narrower* than the specified size β (correct answer)
- B.
max-width is only for mobile
- C. They are identical
- D.
min-width is deprecated
Explanation: min-width queries (e.g. @media (min-width: 768px)) are used in mobile-first development to apply styles on tablets and desktops. max-width queries apply styles strictly on smaller devices.
Question 17: What is the difference between flex-grow and flex-shrink in Flexbox?
- A.
flex-grow allows elements to expand to fill empty space; flex-shrink allows them to shrink to prevent overflow β (correct answer)
- B. They are identical
- C.
flex-shrink is for desktop only
- D.
flex-grow is deprecated
Explanation: flex-grow defines the ability of a flex item to grow if necessary. flex-shrink defines the ability of a flex item to shrink when there is insufficient space in the container.
Question 18: Which CSS grid function generates repeating columns automatically, adjusting column counts to fill available container space?
- A.
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) β (correct answer)
- B.
grid-template-columns: 200px * 3
- C.
grid-columns: autofit(200px)
- D.
grid-template: repeat(3)
Explanation: The auto-fit (and auto-fill) keywords inside grid repeat loops tell the browser to generate as many columns of at least 200px as will fit within the container, adapting dynamically without media queries.
Question 19: What does the clamp() function in CSS do?
- A. Restricts database inputs
- B. Clamps a value between a defined minimum, a preferred value, and a defined maximum (often used for fluid typography) β (correct answer)
- C. Encrypts CSS styles
- D. Triggers page animations
Explanation: clamp(min, preferred, max) allows setting relative sizes that scale dynamically (like clamp(1rem, 5vw, 2.5rem)), ensuring text scales with the screen width but never goes below 1rem or above 2.5rem.
Question 20: What is the purpose of the picture HTML5 element in responsive web design?
- A. To display galleries of images with animations
- B. To serve different optimized image sources based on screen media breakpoints, improving page performance β (correct answer)
- C. To link database image URLs
- D. To play HTML5 videos
Explanation: The <picture> element wraps multiple <source> elements and an <img> tag, letting the browser download only the image that matches the device resolution (art direction).
Question 21: Which flex property defines the default initial size of a flex item before empty space is distributed?
- A. flex-basis β (correct answer)
- B. flex-grow
- C. flex-shrink
- D. flex-width
Explanation: flex-basis specifies the initial main-size of a flex item. It acts like width for horizontal flex flows, and height for vertical flex flows.
Question 22: What is the difference between relative unit sizing like vh/vw and percentage %?
- A.
% is relative to its direct parent element width/height; vw/vh are relative to the overall viewport window width/height β (correct answer)
- B. They are identical
- C.
% is faster
- D.
vw/vh are only for grids
Explanation: Percentages % depend entirely on parent container sizing boundaries. Viewport units vw/vh always refer to browser screen boundaries directly, ignoring parent sizes.
Question 23: Which media query feature checks if the user's device orientation is tall rather than wide?
- A.
@media (orientation: portrait) β (correct answer)
- B.
@media (orientation: landscape)
- C.
@media (aspect-ratio: tall)
- D.
@media (device: phone)
Explanation: The orientation media feature has two values: portrait (height is greater than or equal to width) and landscape (width is greater than height).
Question 24: What does the box-sizing: border-box CSS rule do?
- A. Adds shadows to elements
- B. Includes padding and border thicknesses inside the element's total declared width and height, preventing layout overflow bugs β (correct answer)
- C. Limits margins
- D. Triggers flexbox rendering
Explanation: By default (content-box), adding padding expands the element's size beyond its defined width. border-box forces padding and borders to sit *inside* the defined width, facilitating reliable responsive sizing.
Question 25: Which property specifies the size of the gaps (gutters) between grid columns and rows?
- A. border-spacing
- B. gap (or grid-gap) β (correct answer)
- C. margin
- D. padding
Explanation: The gap property (shorthand for row-gap and column-gap) defines the spacing size between columns and rows inside flex and grid layouts.
Question 26: What is accessibility (a11y) in responsive web design?
- A. Ensuring the page loads fast
- B. Designing pages so they are easily accessible and usable by everyone, including people with physical or cognitive impairments β (correct answer)
- C. Uploading files to public clouds
- D. Compiling page builds
Explanation: Accessibility involves structural hierarchy, keyboard navigability, high color contrasts, screen-reader optimizations, and fluid text scaling without breaking layout flow.
Question 27: What is the output?
``css
.container {
display: grid;
grid-template-columns: 1fr 2fr;
}
``
- A. Renders two columns, with the second column taking double the remaining space of the first column β (correct answer)
- B. Renders columns of equal sizes
- C. Compiler Error
- D. Renders overlapping text blocks
Explanation: fr is the fractional unit in CSS Grid. Here, the grid splits into 3 fractional segments. Column 1 takes 1/3 (1fr) and Column 2 takes 2/3 (2fr) of the available horizontal space.
Question 28: What is fluid typography in responsive design?
- A. Standard pixel fonts
- B. Font sizes that scale smoothly in relation to viewport width using relative calculations or clamp expressions β (correct answer)
- C. Interactive animated text
- D. Safe web fonts only
Explanation: Fluid typography uses calculations like font-size: calc(1rem + 1vw) or clamp() to scale font size dynamically as screen width shifts, avoiding harsh font size jumps between breakpoints.
Question 29: What does @media (prefers-color-scheme: dark) do?
- A. Activates a black layout background color by force
- B. Queries if the user has enabled dark mode inside their operating system settings, allowing the site to automatically apply dark styles β (correct answer)
- C. Checks if the site has CSS styles
- D. Triggers dark filters on pictures
Explanation: This media feature checks client system settings, letting web applications adapt their theme color automatically to match the user's OS preference.
Question 30: What is "art direction" when handling responsive images?
- A. Selecting beautiful color palettes
- B. Serving differently cropped or composed images for different screen breakpoints (e.g. close-ups on mobile, panoramic on desktop) to optimize clarity β (correct answer)
- C. Running animations
- D. Drawing SVGs
Explanation: Art direction ensures that the main focal point of an image is clear even on small screens, which is achieved by swapping image assets dynamically using the <picture> tag.