Responsive Design & Media Queries Flashcards
7 cards from real CSS practice questions. Tap to flip, then mark Knew It or Still Learning — missed cards come back until you master them.
Read the first 7 Responsive Design & Media Queries flashcards as text
Which value makes a flex container wrap items onto multiple lines?
Answer: flex-wrap: wrap
flex-wrap: wrap allows flex items to flow onto new lines when space runs out.
What does 'object-fit: cover' do for a responsive image?
Answer: Scales the image to fill its box while preserving aspect ratio and cropping overflow
cover fills the container, maintaining ratio and cropping excess.
Which CSS feature query checks browser support before applying styles?
Answer: @supports
@supports applies rules only when the browser supports a given declaration.
Why is using relative units like rem preferred over px for responsive design?
Answer: They scale with the root font size and user settings
rem units respect the root font size, improving scalability and accessibility.
What does 'aspect-ratio: 16 / 9' do?
Answer: Maintains a 16:9 proportion for the element's box
The aspect-ratio property keeps the box at the specified width-to-height ratio.
Which approach helps prevent layout shift (CLS) for responsive images?
Answer: Setting explicit width and height attributes
Specifying width and height lets the browser reserve space and avoid shifting.
What does a media query with 'min-width: 0px' and no upper bound effectively target?
Answer: All viewport widths
A min-width of 0 with no max applies to every screen width.