Responsive Web Design: final quiz

• <meta name="viewport" content="width=device-width, initial-scale=1">
• <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
• <meta name="viewport" content="width=980">
• <meta name="viewport" content="width=device-width, maximum-scale=1">

• In the base rules, outside any media query
• Inside a (max-width: 480px) media query
• Inside a (width >= 20rem) media query

Select all that apply.

• @media (width >= 40rem)
• @media (40rem <= width < 64rem)
• @media (width < 50rem)
• @media (min-width: 64rem)

<img src="photo-800.jpg"
     srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1600.jpg 1600w"
     alt="A mountain lake" width="1600" height="1067">

• 100vw, the full viewport width
• The width of the image’s parent element
• 400 pixels, the smallest candidate

• clamp(1rem, 0.9rem + 0.5vw, 1.25rem)
• font-size: 4vw
• clamp(14px, 3vw, 22px)

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: 1rem;
}

• Shows one column that fills the container
• Shows two columns and overflows the container
• Shows no columns until the container is 30rem wide

• .card-wrapper { container-type: inline-size; } with @container (inline-size >= 30rem) { .card { ... } }
• .card { container-type: inline-size; } with @container (inline-size >= 30rem) { .card { ... } }
• @media (width >= 30rem) { .card { ... } }

/* Option A */
.hero { height: 100vh; }

/* Option B */
.hero { min-height: 100vh; min-height: 100svh; }

/* Option C */
.hero { height: 100dvh; }

• Option B
• Option A
• Option C