Responsive Design Flashcards

What is a 'breakpoint' in responsive web design?

Answer: A specific viewport width at which the layout changes via media queries

A breakpoint is a viewport width threshold where CSS media queries trigger layout changes to better suit the screen size.

What does 'fluid typography' mean in responsive design?

Answer: Font size that scales smoothly between a minimum and maximum as the viewport changes

Fluid typography uses viewport units or clamp() to make font sizes scale proportionally with the viewport rather than jumping at breakpoints.

Which CSS property controls the stacking order of overlapping elements in a responsive layout?

Answer: z-index

z-index controls which overlapping element appears on top; higher values are rendered above lower values.

What is the purpose of using `picture` element with multiple `source` tags?

Answer: To serve different image formats or crops based on viewport conditions

The picture element with source tags lets you serve art-directed images or different formats (WebP, AVIF) based on media queries or format support.

What is the CSS `aspect-ratio` property used for in responsive design?

Answer: Maintaining a fixed width-to-height ratio as an element resizes

aspect-ratio maintains a consistent width-to-height ratio (e.g., 16/9) as an element scales, preventing layout shifts from image loading.

In a mobile-first CSS strategy, which ruleset is written first?

Answer: Styles for the smallest (mobile) viewport

Mobile-first means writing base CSS for the smallest screens, then using min-width media queries to progressively enhance for larger viewports.

What problem does the CSS `overflow-x: hidden` on the body solve in responsive design?

Answer: Hides horizontal scrollbars caused by elements wider than the viewport

overflow-x: hidden on the body prevents a horizontal scrollbar from appearing when an element accidentally extends beyond the viewport width.