arcbyte/CSS
学习库CSSResponsive Design

Responsive Design

Make layouts adapt with fluid sizing, media queries, and container queries.

更新于 适用于 Modern CSS

Responsive design adapts to available space, user settings, and input methods. A resilient page starts flexible and adds breakpoints where its content needs them.

Build a fluid foundation

layout.css
.shell {
  width: min(72rem, 100% - 2rem);
  margin-inline: auto;
}
img { max-width: 100%; height: auto; }

Use percentages, flexible tracks, min(), max(), and clamp() before reaching for media queries.

Add content-driven breakpoints

layout.css
.lesson-layout { display: grid; gap: 2rem; }

@media (min-width: 60rem) {
  .lesson-layout { grid-template-columns: 16rem minmax(0, 1fr); }
}

Choose the breakpoint where the layout becomes uncomfortable, not from a list of device models.

Respond to the container

card.css
.card-shell { container-type: inline-size; }
.card { display: grid; gap: 1rem; }

@container (min-width: 32rem) {
  .card { grid-template-columns: 10rem 1fr; }
}

Container queries let a reusable component adapt to the space its parent gives it, wherever it appears.

Respect user preferences

preferences.css
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto; transition-duration: 0.01ms; }
}

Keep this

Start fluid, add content-driven queries, let components respond to their containers, and honor user preferences.

学习位置已保存在此设备上。