Responsive Design Flashcards

Which CSS unit is relative to the viewport's width?

Answer: vw

vw (viewport width) is equal to 1% of the viewport's width, making it ideal for responsive layouts.

What does the CSS property `object-fit: cover` do to an image?

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.

In a CSS Grid layout, what does `grid-template-columns: repeat(auto-fill, minmax(200px, 1fr))` accomplish?

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.

What is the default value of the CSS `flex-wrap` property?

Answer: nowrap

flex-wrap defaults to nowrap, causing flex items to stay on one line and potentially overflow the container.

Which HTML element should wrap navigation links to improve accessibility on responsive sites?

Answer:

The element provides semantic meaning, helping screen readers identify the navigation region of a page.

What CSS technique allows you to apply different styles when a user's device is in dark mode?

Answer: @media (prefers-color-scheme: dark)

The prefers-color-scheme media feature detects whether the user has requested a dark or light color theme.

Which approach best handles responsive images for different screen densities?

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.