Web Development Responsive Design 3 — Questions and Answers
Question 1: What is the purpose of the `sizes` attribute on an `<img>` element?
- Sets the physical dimensions of the image file
- Tells the browser how wide the image will be displayed at different breakpoints (Correct answer)
- Specifies the number of image variants in srcset
- Limits the maximum file size the browser will download
Correct answer: Tells the browser how wide the image will be displayed at different breakpoints
The sizes attribute tells the browser how wide the image will be rendered at various viewport widths, enabling smarter srcset selection.
Question 2: Which CSS Flexbox property controls how items grow to fill available space?
- flex-shrink
- flex-basis
- flex-grow (Correct answer)
- align-self
Correct answer: flex-grow
flex-grow specifies how much of the remaining space in the flex container should be assigned to the item.
Question 3: What does `min-width` in a media query typically represent in a mobile-first approach?
- The smallest screen the layout supports
- The breakpoint at which styles begin to apply going up (Correct answer)
- The minimum font size for the viewport
- The minimum padding applied to containers
Correct answer: The breakpoint at which styles begin to apply going up
In mobile-first design, min-width media queries add or override styles as the screen gets wider, starting from base mobile styles.
Question 4: Which CSS function lets you clamp a value between a minimum and maximum?
- min()
- max()
- clamp() (Correct answer)
- calc()
Correct answer: clamp()
clamp(min, preferred, max) ensures a value never goes below the minimum or above the maximum, useful for fluid typography.
Question 5: What is the correct way to hide an element visually but keep it accessible to screen readers?
- display: none
- visibility: hidden
- opacity: 0
- position: absolute; clip: rect(0,0,0,0); width: 1px; height: 1px; overflow: hidden (Correct answer)
Correct answer: position: absolute; clip: rect(0,0,0,0); width: 1px; height: 1px; overflow: hidden
The visually-hidden / sr-only pattern removes the element from visual flow while keeping it in the accessibility tree.
Question 6: In CSS Grid, what does the `fr` unit represent?
- A fixed pixel fraction of the container
- A fraction of the available space in the grid container (Correct answer)
- The number of rows the item spans
- A font-relative unit like em
Correct answer: A fraction of the available space in the grid container
The fr unit represents a fraction of the leftover space in the grid container after fixed-size tracks are accounted for.
Question 7: Which meta tag is essential for responsive web design to work correctly on mobile browsers?
- <meta name='mobile-web-app-capable' content='yes'>
- <meta name='viewport' content='width=device-width, initial-scale=1'> (Correct answer)
- <meta name='HandheldFriendly' content='true'>
- <meta http-equiv='X-UA-Compatible' content='IE=edge'>
Correct answer: <meta name='viewport' content='width=device-width, initial-scale=1'>
The viewport meta tag instructs mobile browsers to set the viewport width to the device width and prevent automatic zoom.
Web Development Responsive Design 3
What is the purpose of the `sizes` attribute on an `` element?