CSS Responsive Design & Media Queries 2 — Questions and Answers
Question 1: Which media feature targets devices in landscape orientation?
- @media (orientation: landscape) (Correct answer)
- @media (rotate: 90deg)
- @media (landscape: true)
- @media (screen: wide)
Correct answer: @media (orientation: landscape)
The orientation media feature accepts the values landscape or portrait.
Question 2: What does the meta viewport value 'width=device-width' do?
- Sets the layout viewport to the device's screen width (Correct answer)
- Forces a fixed 980px width
- Disables zooming
- Doubles the pixel density
Correct answer: Sets the layout viewport to the device's screen width
It matches the layout viewport width to the device's actual screen width.
Question 3: Which unit is relative to 1% of the viewport's width?
- vw (Correct answer)
- vh
- em
- %
Correct answer: vw
vw equals 1% of the viewport width.
Question 4: A mobile-first stylesheet typically uses which media query type to add larger-screen rules?
- min-width (Correct answer)
- max-width
- min-device-pixel-ratio
- max-height
Correct answer: min-width
Mobile-first design starts small and adds min-width breakpoints for larger screens.
Question 5: Which CSS feature lets you specify different image sources based on screen size in HTML?
- srcset attribute (Correct answer)
- background-cover
- media-img
- image-set only in CSS
Correct answer: srcset attribute
The srcset attribute on img provides multiple resolution candidates.
Question 6: What does '@media (prefers-color-scheme: dark)' detect?
- The user's system dark mode preference (Correct answer)
- A dark background image
- Low battery state
- A high-contrast monitor
Correct answer: The user's system dark mode preference
It matches when the user has requested a dark color theme at the OS level.
Question 7: Which combinator in a media query requires both conditions to be true?
- and (Correct answer)
- or
- not
- only
Correct answer: and
The 'and' keyword combines multiple media features that must all match.
CSS Responsive Design & Media Queries 2
Which media feature targets devices in landscape orientation?