Elastyczne projektowanie stron

Funkcje internetowe: zapytania o kontener (rozmiar), małe, duże i dynamiczne jednostki widocznego obszaru, aspect-ratio, min(), max() i clamp(), jednostki widocznego obszaru.

Ogólne sprawdzone metody

  • Używaj zapytań @container, aby tworzyć elastyczne układy oparte na komponentach, które dostosowują się do rozmiaru kontenera nadrzędnego, a nie do widocznego obszaru. Więcej informacji znajdziesz w sekcji Stylizacja uwzględniająca rozmiar.
  • Używaj dynamicznych jednostek widocznego obszaru (dvh, dvw) zamiast vh/vw, aby zapobiec uszkodzeniu układu, gdy elementy interfejsu przeglądarki mobilnej (np. paski adresu) pojawiają się lub znikają.
  • Używaj aspect-ratio w przypadku elementów multimedialnych (takich jak <img> i <video>), aby zarezerwować miejsce podczas ładowania i zapobiec skumulowanemu przesunięciu układu (CLS).

Informacje o mechanizmach układu, które umożliwiają tworzenie elastycznego interfejsu (flexbox, siatka, jednostki zapytań o kontener, jednostki widocznego obszaru), znajdziesz w artykule Układy CSS i elastyczne projektowanie stron.

Typografia elastyczna

  • ŁĄCZ jednostki względne widocznego obszaru i czcionki w clamp(), aby rozmiary czcionek skalowały się wraz z rozmiarem widocznego obszaru, ale pozostawały w żądanym zakresie. Na przykład: clamp(2rem, 1rem + 5vw, 4rem). Dostosuj proporcje jednostek względnych widocznego obszaru i jednostek względnych czcionki, aby kontrolować szybkość zmiany rozmiaru czcionki.
  • NIE używaj samej jednostki vw do określania rozmiaru czcionki bez clamp(), ponieważ może to spowodować, że tekst będzie zbyt mały lub zbyt duży na ekranach o nietypowych rozmiarach.

Aby skalować typ i odstępy za pomocą kontenera, a nie widocznego obszaru, zapoznaj się z artykułem o skalowaniu płynnym.