Web Development Responsive Design 5

Question 1

What is a 'breakpoint' in responsive web design?

Accepted Answer

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

Answer

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

Question 2

What does 'fluid typography' mean in responsive design?

Accepted Answer

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

Answer

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

Question 3

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

Accepted Answer

z-index

Answer

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

Question 4

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

Accepted Answer

To serve different image formats or crops based on viewport conditions

Answer

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

Question 5

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

Accepted Answer

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

Answer

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

Web Development Practice Test