Website Design Responsive Website Design 3 — Questions and Answers
Question 1: Which CSS function allows you to set a value that adapts between a minimum and maximum based on the viewport?
- calc()
- clamp() (Correct answer)
- min()
- max()
Correct answer: clamp()
The clamp() function takes three values—minimum, preferred, and maximum—and returns a value constrained within that range.
Question 2: What is a CSS breakpoint?
- A point where CSS fails to render
- A viewport width at which layout changes are applied via media queries (Correct answer)
- A JavaScript event triggered on resize
- A browser compatibility issue
Correct answer: A viewport width at which layout changes are applied via media queries
A breakpoint is a specific viewport width defined in a media query where the CSS layout shifts to accommodate different screen sizes.
Question 3: Which CSS property makes an image scale down to fit its container without exceeding its natural size?
- width: 100%
- max-width: 100% (Correct answer)
- min-width: 100%
- object-fit: contain
Correct answer: max-width: 100%
Setting max-width: 100% on an image ensures it never exceeds its container's width while still rendering at its natural size when space allows.
Question 4: In CSS Grid, what does the fr unit represent?
- A fixed number of frames
- A fraction of the available space in the grid container (Correct answer)
- The font-relative size unit
- A percentage of the parent element
Correct answer: A fraction of the available space in the grid container
The fr unit represents a fraction of the remaining free space in the grid container after non-flexible tracks are accounted for.
Question 5: What is the main advantage of using CSS custom properties (variables) in responsive design?
- They load faster than regular CSS
- They allow values to be changed in one place and updated across media queries (Correct answer)
- They are only supported on mobile browsers
- They replace the need for media queries
Correct answer: They allow values to be changed in one place and updated across media queries
CSS custom properties can be redefined inside media queries, making it easy to update spacing, colors, or sizes consistently across breakpoints.
Question 6: Which approach does responsive web design use to handle touch interactions on mobile?
- Disabling all click events
- Using touch-action CSS and pointer event APIs to accommodate touch input (Correct answer)
- Replacing links with buttons
- Requiring JavaScript frameworks
Correct answer: Using touch-action CSS and pointer event APIs to accommodate touch input
The touch-action CSS property and pointer/touch event APIs allow designers to support swiping, tapping, and other touch gestures responsively.
Question 7: What is the recommended minimum tap target size for mobile usability according to Google's guidelines?
- 24x24 pixels
- 44x44 pixels (Correct answer)
- 32x32 pixels
- 60x60 pixels
Correct answer: 44x44 pixels
Google recommends tap targets be at least 44x44 pixels to ensure they are easily tappable without accidentally hitting adjacent elements.
Website Design Responsive Website Design 3
Which CSS function allows you to set a value that adapts between a minimum and maximum based on the viewport?