Website Design Responsive Website Design 5

Question 1

What is the difference between 'adaptive design' and 'responsive design'?

Accepted Answer

Adaptive design uses fixed layouts for specific breakpoints; responsive design uses fluid, flexible layouts

Answer

Adaptive design serves distinct fixed-width layouts per device type, while responsive design uses fluid grids and CSS to create a single layout that scales across all sizes.

Question 2

Which CSS media feature detects if the user prefers reduced motion for accessibility?

Accepted Answer

prefers-reduced-motion

Answer

The prefers-reduced-motion media feature detects when the user has requested minimal animation in their OS settings, allowing developers to disable animations.

Question 3

What does 'fluid typography' mean in responsive web design?

Accepted Answer

Font sizes that scale smoothly with the viewport width without distinct breakpoints

Answer

Fluid typography uses viewport units (vw) or the clamp() function to make font sizes scale proportionally with the viewport, avoiding abrupt size jumps.

Question 4

What is the purpose of the CSS 'object-fit' property in responsive image design?

Accepted Answer

It controls how an image fills its container without distortion

Answer

The object-fit property specifies how an image or video should be resized to fit its container, with options like cover, contain, and fill.

Question 5

In responsive web design, what is a 'container query'?

Accepted Answer

A CSS feature that applies styles based on the size of a parent container rather than the viewport

Answer

Container queries allow styles to be applied based on the size of the element's parent container, enabling truly component-level responsive design.

Website Design Practice Test

Website Design Practice Test

Website Design Responsive Website Design 5