Web Development Responsive Design 5 — Questions and Answers
Question 1: What is a 'breakpoint' in responsive web design?
- A JavaScript error that stops page rendering
- A specific viewport width at which the layout changes via media queries (Correct answer)
- The maximum number of columns a grid can have
- The point where images stop loading on slow connections
Correct answer: A specific viewport width at which the layout changes via media queries
A breakpoint is a viewport width threshold where CSS media queries trigger layout changes to better suit the screen size.
Question 2: What does 'fluid typography' mean in responsive design?
- Text that animates letter by letter
- Font size that scales smoothly between a minimum and maximum as the viewport changes (Correct answer)
- Typography that uses only system fonts
- Text that reflows automatically in RTL layouts
Correct answer: Font size that scales smoothly between a minimum and maximum as the viewport changes
Fluid typography uses viewport units or clamp() to make font sizes scale proportionally with the viewport rather than jumping at breakpoints.
Question 3: Which CSS property controls the stacking order of overlapping elements in a responsive layout?
- order
- z-index (Correct answer)
- stack-level
- layer
Correct answer: z-index
z-index controls which overlapping element appears on top; higher values are rendered above lower values.
Question 4: What is the purpose of using `picture` element with multiple `source` tags?
- To play multiple audio files simultaneously
- To serve different image formats or crops based on viewport conditions (Correct answer)
- To create an image slideshow without JavaScript
- To lazy-load images in sequence
Correct answer: To serve different image formats or crops based on viewport conditions
The picture element with source tags lets you serve art-directed images or different formats (WebP, AVIF) based on media queries or format support.
Question 5: What is the CSS `aspect-ratio` property used for in responsive design?
- Setting the ratio of font-size to line-height
- Maintaining a fixed width-to-height ratio as an element resizes (Correct answer)
- Controlling the zoom level on mobile devices
- Specifying how many columns a grid item spans
Correct answer: Maintaining a fixed width-to-height ratio as an element resizes
aspect-ratio maintains a consistent width-to-height ratio (e.g., 16/9) as an element scales, preventing layout shifts from image loading.
Question 6: In a mobile-first CSS strategy, which ruleset is written first?
- Styles for the largest desktop viewport
- Styles for the smallest (mobile) viewport (Correct answer)
- Styles for the median tablet viewport
- Print styles
Correct answer: Styles for the smallest (mobile) viewport
Mobile-first means writing base CSS for the smallest screens, then using min-width media queries to progressively enhance for larger viewports.
Question 7: What problem does the CSS `overflow-x: hidden` on the body solve in responsive design?
- Prevents vertical scrolling on mobile
- Hides horizontal scrollbars caused by elements wider than the viewport (Correct answer)
- Disables pinch-to-zoom on touch devices
- Removes padding from container edges
Correct answer: Hides horizontal scrollbars caused by elements wider than the viewport
overflow-x: hidden on the body prevents a horizontal scrollbar from appearing when an element accidentally extends beyond the viewport width.
Web Development Responsive Design 5
What is a 'breakpoint' in responsive web design?