Skalowanie płynne

Przegląd

Skalowanie płynne umożliwia komponentom dostosowywanie ich wewnętrznych proporcji (takich jak rozmiary czcionek i odstępy) na podstawie ich bieżących wymiarów. Dzięki temu projekt jest bardziej spójny niż w przypadku przechodzenia między stałymi punktami przerwania.

W przeszłości skalowanie płynne było realizowane za pomocą jednostek widocznego obszaru (skalowanie na podstawie rozmiaru ekranu), ale nowoczesne jednostki zapytań o kontener umożliwiają skalowanie komponentów względem kontenera nadrzędnego. Dzięki temu komponenty wyglądają dobrze niezależnie od tego, gdzie są umieszczone w układzie, co sprzyja lepszej izolacji i możliwości ponownego użycia komponentów.

Implementacja

1. Definiowanie kontenera

Aby używać jednostek zapytań o kontener, musisz najpierw zdefiniować kontekst kontenera w elemencie nadrzędnym.

.component-wrapper {
  /* Define the container type. Use 'inline-size' for width-based scaling. */
  /* You can also use 'size' for both width and height, but it requires explicit sizing. */
  container-type: inline-size;
  
  /* Optional: Name the container for specific targeting */
  container-name: fluid-card;
}

2. Używanie jednostek zapytań o kontener

Używaj jednostek zapytań o kontener (cqi, cqb itp.), aby ustawiać rozmiary względem wymiarów kontenera.

• cqi: 1% rozmiaru inline kontenera (szerokość w poziomych trybach pisania).
• cqb: 1% rozmiaru bloku kontenera (wysokość w trybach pisania w poziomie).

Uwaga: jednostek kontenera można używać bezpośrednio w dowolnej usłudze bez konieczności stosowania reguły zapytania @container. Są one automatycznie rozwiązywane na podstawie najbliższego elementu nadrzędnego ze zdefiniowanym container-type.

.component-title {
  /* Scale font size based on container width */
  /* 10cqi means 10% of the container's width */
  font-size: 10cqi;
}

.component-body {
  /* Scale padding based on container width */
  padding: 5cqi;
}

3. Ogranicz wartości za pomocą clamp()

Aby zapobiec zbyt dużemu lub zbyt małemu rozmiarowi, użyj funkcji CSS clamp(). Wpływa to na możliwość powiększania lub dostosowywania podstawowego rozmiaru czcionki przez użytkownika. Aby tekst był zgodny z wytycznymi dotyczącymi ułatwień dostępu, maksymalny rozmiar nie może przekraczać 2,5-krotności minimalnego rozmiaru.

.component-title {
  /* Clamp font size between 1rem and 2.5rem, scaling with 5% of container width */
  font-size: clamp(1rem, 5cqi, 2.5rem);
}

Strategie zastępcze

Jeśli przeglądarka nie obsługuje zapytań o kontener, musisz podać kreację zastępczą, używając jednostek widocznego obszaru lub standardowych zapytań o multimedia.

.component-title {
  /* Fallback for browsers that do not support container units */
  font-size: clamp(1rem, 5vw, 2.5rem);
}

@supports (font-size: 1cqi) {
  .component-title {
    /* Use container units where supported */
    font-size: clamp(1rem, 5cqi, 2.5rem);
  }
}

Dzięki temu tekst nadal będzie się skalować, ale na podstawie szerokości ekranu, a nie komponentu. Należy to przetestować, aby sprawdzić, czy działa w Twoim przypadku.