Karta zaciskowa

W tej demonstracji ustawiasz szerokość za pomocą parametru clamp(): width: clamp(<min>, <actual>, <max>).

Służy do ustawiania bezwzględnego i maksymalnego rozmiaru oraz rzeczywistego rozmiaru. W przypadku wartości tego parametru mogą one wyglądać podobnie do tych:

.parent {
  width: clamp(23ch, 60%, 46ch);
}

Minimalny rozmiar to 23ch – 23 znaki, a maksymalny – 46ch – 46 znaków. Jednostki szerokości znaków zależą od rozmiaru czcionki elementu (a konkretnie szerokości glifu 0). Rozmiar rzeczywisty to 50%, co stanowi 50% szerokości nadrzędnej tego elementu.

Funkcja clamp() pozwala elementowi zachować szerokość 50% do 50%, która będzie większa niż 46ch (w większych widocznych obszarach) lub mniejsza niż 23ch (w mniejszych widocznych obszarach). Na filmie zobacz, jak szerokość tej karty zwiększa się do zamocowanego punktu maksymalnego i maleje do minimum, gdy karta nadrzędna się rozciąga i zmniejsza. Pozostaje wyśrodkowany na elemencie nadrzędnym za pomocą dodatkowych właściwości. Umożliwia to tworzenie bardziej czytelnych układów, ponieważ tekst nie będzie zbyt szeroki (powyżej 46ch) ani zbyt wąski (poniżej 23ch).

Korzystając z tej techniki, możesz stosować elastyczną typografię. Na przykład: font-size: clamp(1.5rem, 20vw, 3rem). W takim przypadku rozmiar czcionki nagłówka zawsze będzie ograniczony od 1.5rem do 3rem, ale będzie się zwiększać i zmniejszać zgodnie z rzeczywistą wartością 20vw, aby dopasować ją do szerokości widocznego obszaru.

To świetny sposób na zapewnienie czytelności przy minimalnych i maksymalnych wartościach rozmiaru. Pamiętaj jednak, że nie jest ona obsługiwana we wszystkich nowoczesnych przeglądarkach, więc przygotuj kreacje zastępcze i przetestuj je.

HTML

<div class="parent">
  <div class="card">
    <h1>Title Here</h1>
    <div class="visual"></div>
    <p>Descriptive Text. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sed est error repellat veritatis.</p>
  </div>
</div>

CSS

        .parent {
  display: grid;
  place-items: center;
}

.card {
  width: clamp(23ch, 60%, 46ch);
  display: flex;
  flex-direction: column;
  padding: 1rem;
}

.visual {
    height: 125px;
    width: 100%;
  }