Responsive Design Flashcards

What is the purpose of the `sizes` attribute on an `` element?

Answer: Tells the browser how wide the image will be displayed at different breakpoints

The sizes attribute tells the browser how wide the image will be rendered at various viewport widths, enabling smarter srcset selection.

Which CSS Flexbox property controls how items grow to fill available space?

Answer: flex-grow

flex-grow specifies how much of the remaining space in the flex container should be assigned to the item.

What does `min-width` in a media query typically represent in a mobile-first approach?

Answer: The breakpoint at which styles begin to apply going up

In mobile-first design, min-width media queries add or override styles as the screen gets wider, starting from base mobile styles.

Which CSS function lets you clamp a value between a minimum and maximum?

Answer: clamp()

clamp(min, preferred, max) ensures a value never goes below the minimum or above the maximum, useful for fluid typography.

What is the correct way to hide an element visually but keep it accessible to screen readers?

Answer: position: absolute; clip: rect(0,0,0,0); width: 1px; height: 1px; overflow: hidden

The visually-hidden / sr-only pattern removes the element from visual flow while keeping it in the accessibility tree.

In CSS Grid, what does the `fr` unit represent?

Answer: A fraction of the available space in the grid container

The fr unit represents a fraction of the leftover space in the grid container after fixed-size tracks are accounted for.

Which meta tag is essential for responsive web design to work correctly on mobile browsers?

Answer:

The viewport meta tag instructs mobile browsers to set the viewport width to the device width and prevent automatic zoom.