Skip to content

← Trail· Lesson 8 of 9

Modern responsive beyond media queries

clamp, container queries, scroll-snap, and layouts that adapt to the component.

TODO i18n: Full body translation pending. Title and description are localized; the body below remains in Portuguese for now.

Media queries continuam úteis, mas o CSS moderno oferece ferramentas no nível do componente.

Ferramentas desta lição

  1. Tipografia fluida — clamp() sem breakpoints de fonte.
  2. Container queries — o card reage ao pai: exemplo e snippet.
  3. Scroll-snap — carrosséis acessíveis sem lib: scroll-snap.
  4. Colunas / mural — multi-column e grid.

Exercício

Pegue o layout com media queries e tente extrair um pedaço para @container. Depois leia o post Container queries na prática.

Próximo

Acessibilidade CSS — foco, formulários e motion.

Practice