4 Responsive Web Design Free Online FlashCards

What is responsive web design?

Responsive web design adapts a page’s layout and presentation to the available space so it remains usable across screen sizes.

What does “viewport” mean in web design?

The viewport is the area of the browser window available for page content.

Why set the viewport meta element for mobile browsers?

It tells mobile browsers to use the device’s CSS-pixel width and sets the initial scale, helping responsive styles use the expected viewport size.

Why can fixed-width layouts work poorly across screen sizes?

Fixed widths can overflow on small screens or leave excessive empty space on large ones. Flexible sizing lets content use the available space.

When is Grid useful, and when is Flexbox useful?

CSS Grid is useful for two-dimensional layouts, while Flexbox is useful for arranging items in one direction.

What does the card-list grid’s auto-fit pattern achieve?

The grid fits as many columns as the container can accommodate, while keeping each card at least 15rem wide.

Why use min(100%, 15rem) for a grid card’s minimum width?

It prevents the card’s minimum width from forcing overflow when the container is narrower.

What does a max-width constraint do for a centered text column?

It lets the column grow while limiting it to 70rem, helping keep text at a readable width on large screens.

How can CSS help images and video fit their containers?

Setting max-width to 100% keeps them from exceeding their containers, while height: auto preserves their proportions.

Why provide width and height attributes on images?

They help the browser reserve space for an image while it loads.

What is a responsive-design breakpoint?

A breakpoint is a point at which a layout changes to better suit the available space.

What should determine where a breakpoint is placed?

Choose breakpoints when the content or layout needs to change, rather than targeting particular device models.