Practice Test GeeksCSS Language Practice Test
← All CSS Flashcard Decks

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

  1. Which media feature targets devices in landscape orientation?

    Answer: @media (orientation: landscape)

    The orientation media feature accepts the values landscape or portrait.

  2. What does the meta viewport value 'width=device-width' do?

    Answer: Sets the layout viewport to the device's screen width

    It matches the layout viewport width to the device's actual screen width.

  3. Which unit is relative to 1% of the viewport's width?

    Answer: vw

    vw equals 1% of the viewport width.

  4. A mobile-first stylesheet typically uses which media query type to add larger-screen rules?

    Answer: min-width

    Mobile-first design starts small and adds min-width breakpoints for larger screens.

  5. Which CSS feature lets you specify different image sources based on screen size in HTML?

    Answer: srcset attribute

    The srcset attribute on img provides multiple resolution candidates.

  6. What does '@media (prefers-color-scheme: dark)' detect?

    Answer: The user's system dark mode preference

    It matches when the user has requested a dark color theme at the OS level.

  7. Which combinator in a media query requires both conditions to be true?

    Answer: and

    The 'and' keyword combines multiple media features that must all match.