Padroneggiare il responsive web design con le funzioni matematiche CSS

La matematica è buona, la matematica è ottima, ma vuoi passare il tuo tempo a fare calcoli quando il tuo foglio di stile può farlo per te?

CSS viene fornito con tre pratiche funzioni matematiche che cambieranno il modo in cui progetti i tuoi siti web. Ti mostreremo come e perché dovresti usarli.

Presentazione della matematica ai CSS

I CSS sono principalmente dichiarativi, ma le revisioni hanno introdotto funzioni nel linguaggio. Ora ci sono molte funzioni nelle specifiche e tre delle più semplici matematiche possono rivelarsi molto utili: calc, max e min.

Puoi usare questo semplice esempio CodePen per aiutare a seguire la guida.

CSS calc() Funzione matematica

La funzione CSS calc() esegue un semplice calcolo e utilizza il risultato come valore della proprietà. Ciò significa che puoi assegnare valori dinamici a proprietà come altezza e larghezza, tutto senza CSS @media query.

Questa funzione supporta addizione (+), moltiplicazione (*), sottrazione (-) e divisione (/) con un solo operatore.

Esempio: creazione di una spaziatura uniforme tra le dimensioni dello schermo

Rendere una pagina web uguale a dimensioni diverse può essere difficile, anche se utilizzi unità CSS dinamiche come vw e %. La funzione CSS calc() cambia questo.

Come puoi vedere nell'immagine sopra, la barra del titolo che attraversa lo schermo ha una spaziatura diversa a seconda delle dimensioni dello schermo. Questo perché abbiamo impostato la larghezza su 80vw, impostando la spaziatura su 20vw; un valore variabile.

Se invece utilizziamo calc(), possiamo impostare la spaziatura in modo che sia la stessa su qualsiasi dimensione dello schermo. La proprietà che utilizziamo per questo è simile a questa:

larghezza: calc (100vw - 400px);

Questo imposta la larghezza della nostra barra del titolo a 400 px in meno rispetto alla larghezza della pagina, creando una spaziatura uniforme indipendentemente dalle dimensioni del display.

CSS max() Funzione matematica

La funzione CSS max() seleziona il valore più alto da un pool per aggiungere un valore a una proprietà CSS. Puoi aggiungere tutti i valori potenziali che desideri, ciascuno separato da una virgola, ma utilizzerà solo il più alto.

Esempio: limitazione dell'altezza della barra di navigazione

Una delle sfide principali che derivano dal responsive web design è l'orientamento. Un sito che funziona su un monitor di computer verticale di grandi dimensioni deve anche avere un bell'aspetto su uno schermo mobile verticale più piccolo.

Questo può rendere il valore di una proprietà ottimo su desktop e cattivo su dispositivo mobile, proprio come mostra l'immagine sopra. La nostra barra di navigazione ha un'altezza impostata di 10 vh, ma questo fa sembrare la barra sottile sui dispositivi desktop.

Possiamo usare la funzione CSS max() per risolvere questo problema:

altezza: max (10vh, 80px);

Aggiungendo una regola come questa, possiamo impostare un'altezza minima di 80px per la nostra barra di navigazione, mantenendo il valore di 10vh se è superiore.

CSS min() Funzione matematica

La funzione min() è come la funzione max(), ma sceglie il valore più basso da un pool da utilizzare come valore della proprietà.

Esempio: impostazione di una dimensione massima del testo

Indipendentemente dal fatto che utilizzi un valore dinamico o meno, ottenere la dimensione del testo su tutte le piattaforme può essere complicato. Possiamo utilizzare la funzione CSS min() per impostare due o più potenziali valori di proprietà per la dimensione del testo dell'intestazione principale e utilizzerà il più piccolo.

Usare un dimensione del carattere: 10vh; proprietà sul testo dell'intestazione principale nel nostro esempio rende il testo fantastico sul desktop, ma troppo grande sui dispositivi mobili.

Per cambiarlo, puoi usare la funzione CSS min() per fornire un dimensionamento alternativo:

dimensione del carattere: min (10vh, 10vw);

Questo esempio funziona perché i display mobili sono alti e sottili, mentre i monitor desktop sono larghi e corti. Ciò significa che l'unità di larghezza di visualizzazione (vw) è più piccola su dispositivi mobili rispetto a desktop.

Utilizzo della matematica per un web design reattivo

Le funzioni matematiche preconfezionate con CSS offrono un modo unico per produrre facilmente siti Web reattivi. Devi solo configurarli correttamente per iniziare.

Naturalmente, ci sono altri metodi e funzioni CSS che puoi utilizzare per creare un sito che abbia un bell'aspetto su tutte le piattaforme.

Come creare una barra di navigazione reattiva utilizzando HTML e CSS

Leggi Avanti

Circa l'autore