Scheda di serraggio

In questa demo, imposterai la larghezza utilizzando clamp() in questo modo: width: clamp(<min>, <actual>, <max>).

Imposta le dimensioni minime e massime assolute e le dimensioni effettive. che può avere il seguente aspetto:

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

Le dimensioni minime qui sono di 23ch o 23 unità di caratteri, mentre le dimensioni massime sono di 46ch (46 caratteri). Le unità di larghezza carattere si basano sulle dimensioni dei caratteri dell'elemento, in particolare sulla larghezza del glifo 0. La dimensione "effettiva" è pari al 50%, che rappresenta il 50% della larghezza principale di questo elemento.

L'azione della funzione clamp() in questo caso consente a questo elemento di mantenere una larghezza del 50% fino a che il 50% sia maggiore di 46ch (nelle aree visibili più larghe) o minore di 23ch (nelle aree visibili più piccole). Nel video, guarda come la larghezza di questa scheda aumenta fino al punto massimo fissato e diminuisce al minimo fissato man mano che la scheda principale si allunga e si restringe. In seguito, rimane centrato nell'elemento principale utilizzando proprietà aggiuntive per centrarlo. Ciò consente layout più leggibili, poiché il testo non sarà troppo largo (sopra 46ch) o troppo schiacciato e stretto (meno di 23ch).

Puoi utilizzare questa tecnica per implementare la tipografia reattiva. Ad esempio: font-size: clamp(1.5rem, 20vw, 3rem). In questo caso, la dimensione del carattere di un titolo rimarrà sempre fissata tra 1.5rem e 3rem, ma crescerebbe e si ridurrà in base al valore effettivo di 20vw per adattarsi alla larghezza dell'area visibile.

Si tratta di un'ottima tecnica per garantire la leggibilità con un valore di dimensione minimo e massimo, ma ricorda che non è supportata in tutti i browser moderni, quindi assicurati di avere elementi di riserva ed esegui il test.

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%;
  }