Web Development Responsive Design 2 — Questions and Answers
Question 1: Which CSS unit is relative to the viewport's width?
- em
- rem
- vw (Correct answer)
- px
Correct answer: vw
vw (viewport width) is equal to 1% of the viewport's width, making it ideal for responsive layouts.
Question 2: What does the CSS property `object-fit: cover` do to an image?
- Stretches the image to fill the container distorting it
- Scales the image to cover the container while maintaining aspect ratio (Correct answer)
- Shrinks the image to fit inside the container
- Centers the image without resizing
Correct answer: Scales the image to cover the container while maintaining aspect ratio
object-fit: cover scales the image to cover the entire container while preserving its aspect ratio, cropping if necessary.
Question 3: In a CSS Grid layout, what does `grid-template-columns: repeat(auto-fill, minmax(200px, 1fr))` accomplish?
- Creates exactly 3 columns of equal width
- Creates as many 200px columns as will fit, expanding them to fill space (Correct answer)
- Creates a single column that is at least 200px wide
- Fills the grid with rows of at least 200px height
Correct answer: Creates as many 200px columns as will fit, expanding them to fill space
auto-fill with minmax creates as many columns as fit, each at least 200px wide, expanding to fill remaining space.
Question 4: What is the default value of the CSS `flex-wrap` property?
- wrap
- wrap-reverse
- nowrap (Correct answer)
- auto
Correct answer: nowrap
flex-wrap defaults to nowrap, causing flex items to stay on one line and potentially overflow the container.
Question 5: Which HTML element should wrap navigation links to improve accessibility on responsive sites?
- <div>
- <section>
- <nav> (Correct answer)
- <aside>
Correct answer: <nav>
The <nav> element provides semantic meaning, helping screen readers identify the navigation region of a page.
Question 6: What CSS technique allows you to apply different styles when a user's device is in dark mode?
- @media (prefers-color-scheme: dark) (Correct answer)
- @media (color-mode: dark)
- @supports (dark-mode)
- @theme dark
Correct answer: @media (prefers-color-scheme: dark)
The prefers-color-scheme media feature detects whether the user has requested a dark or light color theme.
Question 7: Which approach best handles responsive images for different screen densities?
- Always serve the largest image available
- Use srcset with x descriptors to specify image density variants (Correct answer)
- Use JavaScript to detect pixel ratio and load images dynamically
- Rely on CSS zoom property to scale images
Correct answer: Use srcset with x descriptors to specify image density variants
The srcset attribute with x descriptors lets browsers choose the appropriate image for the device's pixel density.
Web Development Responsive Design 2
Which CSS unit is relative to the viewport's width?