Responsywność

Projektuję układ, który dopasowuje się do miejsca i potrzeb treści: elastyczne szerokości, Flexbox/Grid, media queries i odpowiednie obrazy.

.cards { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 48rem) {
  .cards { grid-template-columns: repeat(3, 1fr); }
}
img { max-width: 100%; height: auto; }

W HTML dodaję meta name="viewport" z width=device-width, initial-scale=1.

Praktyka: testuję wąski ekran, długie teksty, powiększenie i nawigację klawiaturą.

Pułapka: responsywność nie sprowadza się do jednego breakpointu „mobile”. Układ nie powinien ucinać treści przy pośrednich szerokościach.