Comprensione delle unità CSS (e come usarle)

Probabilmente hai già visto varie unità CSS nel codice web, ma capire come funzionano ti consente di usarle in modo più intenzionalmente. In questo post, imparerai quali sono veramente le unità CSS, come influenzano i tuoi layout e come usarli all'interno di Divi 5 ti aiuta a progettare in modo più reattivo.

Divi 5 porta il supporto nativo per le unità CSS direttamente nel costruttore. Grazie alle nuove funzionalità di unità avanzate, è possibile utilizzare %, EM, REM, VW e altro senza codice personalizzato.

Cosa sono le unità CSS?

Le unità CSS dicono al browser quanto dovrebbe essere grande o piccolo. Sia che tu stia impostando le dimensioni di un'intestazione, la larghezza di una sezione o la spaziatura tra elementi, stai usando le unità per definire quello spazio. Senza di loro, il browser non ha idea di cosa fare dei tuoi valori.

Ad esempio, la larghezza di scrittura: 100 non significa nulla per il browser. Ma aggiungi un'unità, come 100px o il 100%, e ora sa esattamente cosa vuoi.

Prendi questo esempio con quattro caselle, ognuna utilizzando un valore CSS diverso:

• Il primo usa la larghezza: 100. Tecnicamente non valido, ma molti browser lo renderà al 100%.
• Il secondo (100px) utilizza una larghezza fissa.
• La terza e la quarta scala (100% e 60%) rispetto al contenitore genitore.

Potresti chiederti perché la prima scatola con larghezza: 100 appare ancora a tutta larga, anche se è tecnicamente non valida.

Larghezza: 100 viene ignorato dal browser perché manca di un'unità. Ma in questo caso, la scatola si estende ancora attraverso il contenitore, non perché il CSS è stato accettato, ma perché elementi a livello di blocco come Div abbracciano naturalmente l'intera larghezza del loro genitore per impostazione predefinita. È una coincidenza del comportamento predefinito, non un risultato del CSS non valido interpretato al 100%.

Unità CSS popolari

Sebbene PX e % compaiono comunemente, molti altri sono altrettanto utili una volta che sai quando usarli:

Vedrai queste unità ovunque nel web design, dall'impostazione delle dimensioni dei caratteri, dalla definizione di larghezze della sezione, nella regolazione dell'imbottitura e dei margini e nella costruzione di layout di griglia flessibili. Sono uno dei fattori decisivi più importanti nel modo in cui il tuo layout appare e si comporta. E dove usi quali unità contano di più in un design efficace, ci arriveremo a breve.

Ma prima, è utile sapere che tutte le unità CSS rientrano in due tipi principali: assoluto e parente.

Unità assolute e relative

Comprendere la differenza è essenziale se si desidera che il tuo layout funzioni bene attraverso diverse dimensioni dello schermo.

Unità assolute

Le unità assolute hanno valori fissi. Ciò significa che quando si imposta qualcosa su 100px, sarà sempre largo 100 pixel, sia che l'utente sia su un telefono, un tablet o un enorme monitor desktop. Queste unità non rispondono alle dimensioni dello schermo o al layout circostante, il che le rende grandi quando hai bisogno di un controllo esatto.

Sono spesso usati per bordi, dimensioni di icone o ombre a scatola fissa, di solito dove la precisione è più della flessibilità.

Ma la stessa precisione può causare problemi. Un design che sembra perfetto su un grande schermo potrebbe traboccare, ridursi goffamente o rompersi interamente su dispositivi più piccoli. Dal momento che le unità assolute non si adattano, possono far sembrare rigido il layout se non utilizzato attentamente.

Unità relative

Come suggerisce il nome, questi si adattano in base all'ambiente circostante. Invece di rimanere bloccati a una dimensione specifica, si ridimensionano a seconda del contesto (elemento genitore, viewport, ecc.). Questo li rende molto più flessibili per il design reattivo.

Alcune unità rispondono alle dimensioni dell'elemento genitore, altre alla dimensione del carattere radice della pagina e alcune reagiscono addirittura alla finestra del browser stesso. Eccone alcuni chiave:

• % scale con il contenitore principale.
• EM si regola in base alla dimensione del carattere dell'elemento genitore.
• REM segue la dimensione del carattere radice della pagina.
• VW e VH rispondono alla larghezza e all'altezza della vista del browser.

Poiché si adattano a diversi ambienti, queste unità ti aiutano a costruire layout che sembrano naturali su qualsiasi schermo. Si espandono o si riducono con lo spazio che vengono dati, il che mantiene i tuoi contenuti leggibili e il tuo design equilibrata tra i dispositivi.

Diamo un'occhiata a un breve esempio per capire perché questa flessibilità è importante. Supponiamo che tu stia costruendo una sezione immagine e imposta la sua larghezza su 1200px.

Potrebbe sembrare perfetto su un monitor di grandi dimensioni, ma su un tablet con una larghezza dello schermo di 768 pixel, l'immagine potrebbe traboccare e sembrare strana. Ora prova a usare:

width: 100%;

Questo dice al browser di far riempire l'immagine la larghezza del suo contenitore. Se lo schermo è largo o stretto, l'immagine si regola automaticamente.

Il vero vantaggio dell'utilizzo di un'unità relativa è la reattività. Non stai solo assegnando una dimensione, ma dando al browser istruzioni chiare su come il tuo layout dovrebbe comportarsi in diversi scenari. E quando lo fai bene, il tuo contenuto si adatta a ogni schermo.

Usando unità relative in cui hanno senso, si evita layout rigidi, riduci la necessità di punti di interruzione e mantieni il design più facile da gestire. E con Divi, non devi scrivere una singola riga di codice per utilizzare diverse unità CSS. Seleziona l'unità che desideri nel costruttore e consulta il layout rispondere in tempo reale.

Quando utilizzare quale unità CSS

Ora che capisci la differenza tra unità assolute e relative, il passo successivo è sapere quando usarne ciascuna.

Di norma, vai con unità relative quando il layout deve adattarsi a diverse dimensioni dello schermo. Questi sono perfetti per larghezze della sezione, tipografia, spaziatura tra elementi o layout a pagina intera. Poiché si ridimensionano automaticamente, ti aiutano a mantenere la coerenza senza creare stili separati per ogni dispositivo.

D'altra parte, le unità assolute sono utili quando si desidera che qualcosa rimangano uguale indipendentemente dalle dimensioni dello schermo. Pensa a bordi, icone, spaziatura fissa o piccoli dettagli visivi.

Ecco alcuni esempi per guidare le tue scelte:

• Usa PX quando hai bisogno di un controllo esatto, come per le dimensioni delle icone. Dal momento che non si adatta, evitalo per larghezze di layout o testo.
• Usa % quando si desidera che gli elementi si ridimensionano con il proprio contenitore.
• Usalo quando si desidera spaziatura per ridimensionare con la dimensione del carattere dell'elemento genitore.
• Usa REM (comunemente indicato come root em) se si desidera dimensionare coerenti sul tuo sito. Poiché si basa sulla dimensione del carattere radicale, mantiene la spaziatura e la tipografia prevedibili.
• Utilizzare VW e VH per sezioni a schermo intero, aree di eroi o spaziatura che rispondono direttamente al Viewport (l'intera vista della schermata del dispositivo).

Per un controllo più avanzato, è anche possibile combinare le unità utilizzando le funzioni CSS. Calc () è utile quando si mescolano valori come 1REM + 5VW per la spaziatura reattiva con una base minima. E Clamp () è ideale per l'impostazione di valori fluidi che crescono o si riducono tra i limiti, rendendolo un'alternativa più pulita alle query dei media.

Alla fine, la scelta dell'unità giusta implica considerare come ogni elemento dovrebbe comportarsi in diversi scenari e raccogliere l'unità che meglio lo realizza.

Le unità avanzate di Divi per costruire reattivamente senza codifica

Abbiamo già visto come le unità CSS ti danno il controllo sul comportamento del layout. Divi 5 prende quel controllo e lo rende senza sforzo da utilizzare con unità avanzate.

Iscriviti al nostro canale YouTube

Con il supporto nativo per %, EM, REM, VW e VH integrati direttamente nel costruttore, è possibile applicare i valori CSS reali a moduli, sezioni, spaziatura e tipografia, senza aver bisogno di aprire un pannello di codice. In qualsiasi campo numerico, basta selezionare la tua unità preferita dal menu a discesa dell'unità avanzata, regolare il valore e vedere le modifiche in diretta.

E non si ferma qui. Divi consente inoltre di utilizzare funzioni CSS avanzate come calc () e clamp () nel Visual Builder. Ciò significa che è possibile creare valori fluidi, unità di miscelazione e i layout di perfezionamento con lo stesso livello di sviluppatori di precisione ottengono da CSS scritti a mano, ma visivamente.

Hai bisogno di una dimensione del carattere che si ridimensiona in modo fluido attraverso diverse dimensioni dello schermo? Usa clamp (). Vuoi offset spaziatura con un mix di valori fissi e flessibili? Prova calc (). Divi gestisce tutto, istantaneamente e visibilmente.

Non stai più indovinando o passa tra design e codice. Divi ti dà il potere visivo e il feedback istantaneo per ottenere la logica reattiva giusta con il pieno controllo su come i tuoi elementi si scatenano e si comportano attraverso i dispositivi.

Impara tutto sulle unità avanzate di Divi 5

Le unità CSS si sincronizzano perfettamente con i flussi di lavoro avanzati di Divi

Hai già visto come Divi semplifica l'utilizzo delle singole unità CSS direttamente all'interno del costruttore. Ma la vera forza mostra quando quelle unità lavorano insieme in tutto il tuo sito. È qui che funzionalità come variabili di design, preset di gruppi di opzioni e funzioni CSS avanzate come calc () e clamp () brillano davvero.

Divi non ti consente solo di inserire le unità CSS nei campi. Ti aiuta a integrarli nell'intero sistema di progettazione senza scrivere codice. Tutto rimane coerente, scalabile e più facile da mantenere.

Vediamo come Divi ti aiuta a usare le unità CSS come parte di un flusso di lavoro flessibile e guidato dalla logica:

1. Creare la logica di layout con variabili di design

Uno dei modi più semplici per risparmiare tempo su qualsiasi progetto è pianificare in anticipo la logica del layout. Invece di regolare la stessa spaziatura o la dimensione del carattere in più luoghi, si definiscono quei valori una volta e li riutilizzano attraverso l'intero design, con le variabili di progettazione di Divi.

È possibile creare valori riutilizzabili come –Card-Padding o –Section-GAP, usando unità CSS reali come 2REM, 5VW o persino formule come Calc (2Rem + 1VW). Una volta impostati, questi valori possono essere applicati su moduli, righe e sezioni per mantenere tutto coerente.

Devi aggiornare la variabile solo se si desidera modificarla in seguito. Il cambiamento riflette ovunque sia usato, salvandoti avanti e indietro della caccia alle impostazioni individuali. E poiché le unità CSS sono costruite direttamente nel sistema di Divi, non ti basi sulle ipotesi ma applicando visivamente la vera logica CSS. Ciò rende il tuo layout più gestibile, scalabile e più facile da regolare man mano che il progetto cresce.

2. Usa il clamp () e il calc () visivamente

CSS funzioni come CLAMP () e Calc () ti aiutano a creare layout reattivi. Ti consentono di definire valori flessibili che si regolano attraverso le dimensioni dello schermo senza scrivere query multimediali. Quindi, invece di impostare dimensioni fisse per ciascun dispositivo, è possibile scrivere una logica come un morsetto (1rem, 2vw, 2,5Rem) per consentire al browser di ridimensionare le cose senza problemi tra i limiti di set. Oppure usa Calc (100VH - 80px) per regolare una sezione di eroi in base all'altezza della visione.

Normalmente, richiedono di scrivere CSS manualmente. In Divi, puoi inserirli direttamente all'interno di qualsiasi campo numerico.

E poiché le unità CSS sono supportate in entrambe le funzioni, è possibile mescolare valori come REM, VW e PX per ottenere esattamente il comportamento che desideri. Vedi i risultati vivono mentre digiti, il che rende facile sperimentare e ottenere la reattività giusta senza lasciare il costruttore.

3. Salva logica dell'unità con preset del gruppo di opzioni

Dopo aver impostato layout utilizzando unità o formule avanzate, non devi ricostruirli. Divi ti consente di salvare la logica di styling, comprese cose come l'imbottitura: pinza (1rem, 3vw, 2rem), come preimpostazione del gruppo di opzioni.

Ciò significa che la prossima volta che hai bisogno dello stesso motivo di spaziatura o layout, non si applica le stesse impostazioni, ma solo il preset salvato.

E se usi variabili di design all'interno dei preset, è ancora meglio. Puoi facilmente creare un sistema interconnesso in cui la modifica degli stili dell'intero sito Web dipende da una sola cosa: la modifica della variabile.

In Divi, l'uso di un'unità CSS non è solo una dimensione; Si tratta di comportamento. Ogni valore impostato diventa parte di un sistema visivo che adatta, ridimensiona e rimane coerente attraverso il layout. E poiché è tutto integrato nel costruttore, sembra meno come la codifica e più come progettare con la logica.

Divi trasforma le unità CSS in una superpotenza visiva

Non è necessario scrivere CSS per utilizzare le unità CSS. Divi 5 li porta tutti in un'interfaccia visiva in cui è possibile esplorare, applicare e visualizzare l'anteprima in tempo reale. Che tu stia regolando la spaziatura, costruendo la tipografia fluida o creando logica di layout con variabili e preset, Divi ti consente di fare tutto visivamente.

Pronto a provarlo? Scarica Divi 5 e inizia a utilizzare le unità CSS reali nei tuoi progetti.