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