Responsive Design & Media Queries Flashcards

Which value of the CSS 'display' property is commonly used for responsive two-dimensional layouts?

Answer: grid

CSS Grid handles rows and columns for two-dimensional responsive layouts.

What does the 'fr' unit represent in CSS Grid?

Answer: A fraction of available free space

The fr unit distributes a fraction of the remaining free space in the grid.

Which function creates responsive grid columns that wrap automatically without media queries?

Answer: repeat(auto-fit, minmax(200px, 1fr))

auto-fit with minmax lets columns flow and resize without explicit breakpoints.

What does the CSS 'clamp()' function let you do for responsive sizing?

Answer: Set a value with a minimum, preferred, and maximum

clamp(min, preferred, max) produces a fluid value bounded by min and max.

Which property enables fluid typography that scales with the viewport?

Answer: font-size with vw units

Using vw (or clamp with vw) makes font-size scale with viewport width.

What is a 'breakpoint' in responsive design?

Answer: A viewport width where the layout changes via media queries

A breakpoint is a defined screen width at which styles adapt.

Which CSS property prevents images from overflowing their container on small screens?

Answer: max-width: 100%

Setting max-width: 100% keeps images within their parent's width.