Scopri come controllare il dimensionamento degli elementi, mantenere una spaziatura appropriata e implementare una tipografia fluida usando queste funzioni CSS ben supportate.
Man mano che il responsive design diventa più articolato, CSS si evolve costantemente per offrire
gli autori hanno aumentato il controllo. La min()
,
max()
e
le funzioni clamp()
,
ora supportati in tutti i browser moderni, sono tra gli strumenti più recenti
di creare siti web e app in modo più dinamico e reattivo. Puoi utilizzare questi
per controllare il ridimensionamento e il ridimensionamento degli elementi, mantenendo la spaziatura tra
e creare caratteri tipografici flessibili e fluidi.
Le funzioni matematiche
Valori e unità CSS livello 4calc()
,min()
,max()
eclamp()
consentono di utilizzare espressioni matematiche con addizione (+), sottrazione (-), moltiplicazione (*) e divisione (/) come valori dei componenti.
Supporto browser
min()
max()
clamp()
Utilizzo
Puoi utilizzare min()
, max()
e clamp()
sul lato destro di qualsiasi CSS
un'espressione in cui avrebbe senso. Per min()
e max()
, devi fornire un'opzione
di valori dell'elenco di argomenti e il browser determina quale
più piccolo o più grande. Ad esempio, nel caso di width: min(1rem, 50%, 10vw)
,
il browser calcola quale di queste unità relative è la più piccola e usa
quel valore per la larghezza dell'elemento.
La funzione max()
esegue la stessa operazione per il valore massimo.
Per utilizzare clamp()
, inserisci tre valori: un valore minimo, un valore ideale
calcolare da un valore e un valore massimo.
Puoi utilizzare queste funzioni ovunque in <length>
, <frequency>
,
<angle>
, <time>
, <percentage>
, <number>
o <integer>
sono consentiti. Tu
possono utilizzarli da soli (come in font-size: max(0.5vw, 50%, 2rem)
), con
calc()
(come in font-size: max(calc(0.5vw - 1em), 2rem)
) o composto (come in
font-size: max(min(0.5vw, 1em), 2rem)
).
Di seguito sono riportati alcuni esempi di utilizzo di queste funzioni.
La larghezza perfetta
Secondo The Elements of Typographic Stile di Robert Bringhurst, "qualsiasi cosa da 45 a 75 caratteri è ampiamente considerata Lunghezza di riga soddisfacente per un set di pagine a colonna singola con una faccia di testo con serigrafia in una dimensione del testo."
Per assicurarti che i blocchi di testo rimangano tra i 45 e i 75 caratteri, utilizza
clamp()
e ch
(avanzamento del carattere di larghezza 0)
unità:
p {
width: clamp(45ch, 50%, 75ch);
}
Questo consente al browser di determinare la larghezza del paragrafo. Imposta la larghezza su
50% per impostazione predefinita. Se il 50% è inferiore a 45ch
, viene utilizzata la larghezza 45ch
e se il 50% è più ampio di 75ch
, utilizza 75ch
.
Puoi interrompere la condivisione anche usando solo min()
o max()
. Se desideri
dell'elemento deve avere sempre una larghezza di 50%
e non superare 75ch
in larghezza su quello più grande
usa width: min(75ch, 50%);
per impostare la dimensione massima.
Allo stesso modo, puoi impostare le dimensioni minime per il testo leggibile utilizzando l'max()
come in width: max(45ch, 50%);
. In questo caso il browser seleziona
è più alto, ovvero l'elemento deve essere 45ch
o superiore.
Gestire la spaziatura interna
Puoi anche utilizzare max()
per impostare una dimensione minima della spaziatura interna. Questo esempio proviene
Trucchi CSS,
in cui il lettore Caluã de Lacerda Pataca ha condiviso questa idea: Lascia che un elemento abbia
spaziatura interna aggiuntiva su schermi di dimensioni maggiori, ma mantieni una spaziatura interna minima su schermi di dimensioni maggiori
dimensioni dello schermo. Per farlo, usa calc()
o max()
e sottrai il minimo
spaziatura interna da entrambi i lati dell'elemento: calc((100vw - var(--contentWidth)) / 2)
,
o max(2rem, 50vw - var(--contentWidth) / 2)
. Nel foglio di stile,
ha questo aspetto:
footer {
padding: var(--blockPadding) max(2rem, 50vw - var(--contentWidth) / 2);
}
Tipografia fluida
Per attivare la tipografia fluida,
Mike Riethmeuller ha reso popolare una tecnica
che utilizza la funzione clamp()
per impostare le dimensioni minime e massime dei caratteri,
e consentire la scalabilità tra queste dimensioni.
Prima del giorno clamp(),
, la progettazione del ridimensionamento del carattere richiedeva stringhe di stile complesse.
puoi lasciare che sia il browser a occuparsi di te. Imposta il carattere minimo accettabile
dimensioni (ad esempio, 1.5rem
per un titolo), dimensioni massime (ad esempio 3rem
) e
dimensioni ideali (ad esempio 5vw
). Ora ci sono elementi tipografici che si adattano allo stile della pagina
dell'area visibile fino a raggiungere i valori minimo e massimo limitati, utilizzando
pochissimo codice:
p {
font-size: clamp(1.5rem, 5vw, 3rem);
}
Altre risorse
- Valori e unità CSS su MDN
- Specifiche per i valori e le unità di livello 4 CSS
- Articolo Trucchi CSS sulla larghezza dell'elemento interno
- min(), max(), clamp() Panoramica di Ahmad Shadeed
Immagine di copertina di @yer_a_wizard su Annulla spruzzi.