La differenza tra unità CSS assoluta e relativa

La scelta delle giuste unità CSS è più che un dettaglio tecnico. È ciò che aiuta il tuo design a rimanere coerente, flessibile e reattivo su tutti i dispositivi. I pixel possono sembrare l'opzione facile, ma non sempre si comportano prevedibilmente su schermi diversi.

In questo post, spiegheremo la differenza tra unità assolute e relative e mostreremo come Divi 5 ti aiuta a usarle in modo più efficace dall'inizio.

Le unità CSS hanno spiegato: perché importa per il tuo sito web?

Le unità CSS controllano quanto è grande tutto sul tuo sito. Scegli sbagliato e il tuo design si rompe su diversi dispositivi.

La maggior parte delle persone usa pixel perché sono semplici e facili da capire. Ma i pixel non si adattano naturalmente al design reattivo. Richiedono query multimediali o funzioni CSS come CLAMP () per rispondere alle modifiche allo schermo.

Altre unità si adattano automaticamente. Scala delle unità di visualizzazione con la finestra del browser. Le unità relative come la dimensione EM si basano sul testo circostante. Diverse unità risolvono diversi problemi. Scegli bene e il tuo design si adatta attraverso i dispositivi senza lavoro extra.

Abbattere le unità assolute: quando le dimensioni fisse funzionano meglio

Le unità assolute mantengono le stesse dimensioni, qualunque cosa accada intorno a loro. Se si imposta qualcosa su 20 pixel largo, rimane 20 pixel se qualcuno lo visualizza su un telefono o un enorme monitor desktop. Il valore non cambia mai in base alle dimensioni dello schermo, agli elementi principali o alle impostazioni del browser.

I pixel (PX) governano questo spazio. Esistono altre unità assolute come centimetri, millimetri e pollici, ma appartengono al design della stampa in cui le misurazioni fisiche contano. Per il web design, i pixel gestiscono quasi ogni misurazione assoluta di cui hai bisogno.

Perché i pixel funzionano perfettamente per i piccoli dettagli

Alcuni elementi di design necessitano di un controllo esatto. Un bordo di 1 pixel dovrebbe sembrare nitido e sottile ovunque. Le ombre di caduta hanno bisogno di precisione per apparire bene. Le piccole icone funzionano meglio quando rimangono coerenti tra i dispositivi.

I pixel funzionano in modo eccellente per questi piccoli dettagli. Il bordo del pulsante dovrebbe avere uno spessore di spessore di 2 pixel, quel sottile ombra dovrebbe essere esattamente l'offset di 4 pixel e l'icona di navigazione dovrebbe essere esattamente 24 pixel quadrati per un perfetto allineamento.

Queste misurazioni non devono scalare con le dimensioni dello schermo. Un bordo che è 1 pixel sul desktop dovrebbe rimanere 1 pixel sul cellulare. Fargli 2 pixel sul cellulare sembrerebbe denso e goffo.

Altri elementi funzionano bene anche con i pixel. I loghi del marchio utilizzano spesso pixel per la coerenza del marchio. Piccoli elementi decorativi come punti o linee necessitano di dimensionamenti esatti. Il caricamento di spinner e barre di avanzamento funziona meglio con le dimensioni fisse.

Rendere i pixel reattivi con le query dei media

I pixel non sono completamente rigidi. Le query multimediali consentono di scambiare diversi valori di pixel a varie dimensioni dello schermo. L'intestazione potrebbe utilizzare il testo di 32 pixel sul desktop, quindi passare a 28 pixel su tablet e 24 su telefoni.

Questo approccio richiede più lavoro delle unità relative. Devi definire i punti di interruzione e scrivere regole separate per ogni dimensione dello schermo, ma hai il controllo totale su come le cose guardano ad ogni dimensione.

Questo approccio funziona bene quando si desidera un controllo specifico ad ogni dimensione dello schermo. Decidi esattamente come appare il tuo testo sui telefoni rispetto ai tablet rispetto ai desktop a dimensioni specifiche. Nessuna sorpresa.

Il CSS extra ne vale la pena per elementi che necessitano di dimensioni precise. I loghi sembrano migliori quando rimangono esattamente le dimensioni giuste per ciascun dispositivo. Gli elementi di navigazione spesso richiedono dimensioni specifiche per funzionare correttamente. I bordi e le ombre decorativi dipendono da misurazioni esatte per sembrare nitido.

Comprensione delle unità relative: l'approccio flessibile al web design

Le unità relative, al contrario, si allungano e si riducono in base a ciò che li circonda. Questa flessibilità fa funzionare i siti Web su telefoni, tablet e computer senza rompere. A differenza delle unità assolute che rimangono fisse, le unità relative si adattano alle dimensioni dello schermo, agli elementi dei genitori o alle preferenze dell'utente.

Queste unità risolvono i problemi che i pixel creano. Il tuo pulsante largo 75 pixel funziona bene sul desktop ma diventa dominante sul cellulare. Le unità relative si regolano automaticamente, salvandoti dalla scrittura di stili separati per ogni dimensione dello schermo.

Come si basano le unità EM

Le unità EM sono relative alla dimensione del carattere del loro elemento principale immediato. Se la dimensione del carattere di base è 16px e si imposta un contenitore su un carattere: 1.25em, questo diventa 20px. Un elemento figlio al suo interno impostato su 1,5em sarà ora 30px (1,5 × 20px), non 24px, perché si basa sul genitore, non sulla radice.

Questo effetto composto è potente per la spaziatura scalabile attorno al testo. Ma se si continua ad elementi di nidificazione con dimensioni di caratteri basate su EM, i tuoi valori possono aumentare rapidamente di dimensioni. Le unità EM funzionano meglio per imbottitura, margine o elementi strettamente legati al testo nelle vicinanze. Per dimensionarie coerenti attraverso il layout, considera invece l'utilizzo di REM.

Le unità Rem mantengono le cose semplici

REM guarda sempre l'elemento HTML radice. Imposta qualcosa su 2Rem ed ha le stesse dimensioni ovunque sulla tua pagina.

La maggior parte dei browser predefinito a 16px per la radice. Quindi 1Rem = 16px, 2Rem = 32px. Cambia la dimensione della radice e tutto le scale basate su REM insieme.

Le unità Viewport Segui lo schermo

Scala delle unità di visualizzazione con la finestra del browser. 50VW = metà della larghezza dello schermo e 100VH = altezza dello schermo intero. Questo è ottimo per le sezioni di eroi che riempiono lo schermo.

I browser mobili di solito non giocano bene con le unità di visualizzazione. La barra degli indirizzi si nasconde e mostra quando si scorre e la tua sezione 100vh potrebbe essere tagliata quando appare la barra degli indirizzi.

VMIN e VMAX confrontano la larghezza e l'altezza dello schermo, quindi sceglierne uno. Vmin usa qualunque sia più piccolo. Su un telefono tenuto in posizione verticale, la larghezza è più piccola, quindi 50 Vmin = 50% della larghezza. Ruota sul paesaggio e l'altezza diventa più piccola, quindi 50 Vmin si interrompe al 50% dell'altezza. VMAX fa il contrario: raccoglie sempre la dimensione più grande. Ciò è utile per gli elementi che devono scalare con la misurazione più grande.

Le percentuali si adattano ai contenitori

Le larghezze basate sulla percentuale si riferiscono sempre alla larghezza dell'elemento genitore. Le percentuali di altezza possono scalare allo stesso modo, ma solo se il genitore ha un'altezza definita; Altrimenti, potrebbero non funzionare come previsto.

Le percentuali di imbottitura e margine sono sempre calcolate dalla larghezza del genitore, anche per i valori superiore e inferiore. Ciò consente di creare spaziature coerenti e layout proporzionali, specialmente nei design dei fluidi.

La differenza

Le unità assolute sono come un righello rigido, mentre le unità relative si comportano più come un nastro di misurazione. Entrambi misurano le cose, ma rispondono in modo molto diverso quando le condizioni cambiano. Ecco come si confrontano:

La maggior parte degli sviluppatori finisce per usare entrambi: pixel per le piccole cose che devono rimanere unità nitide e relative per i grandi pezzi strutturali che devono flettere.

Scegliere le unità giuste per il tuo design

Parti diverse del tuo sito Web necessitano di approcci diversi. Alcuni elementi rimangono delle stesse dimensioni ovunque, mentre altri si adattano in base alle dimensioni dello schermo o alle impostazioni dell'utente. La maggior parte degli sviluppatori pensa a questo. C'è un modo più semplice: abbina l'unità a ciò che vuoi che quell'elemento faccia.

Pensa prima ai tuoi utenti

Le persone sfogliano il tuo sito in modi inaspettati. Qualcuno visita sul proprio telefono. Il tuo testo sembra minuscolo, quindi pizzicano lo zoom. Se hai costruito con unità REM, tutto cresce insieme proporzionalmente. Se hai usato i pixel ovunque, le cose iniziano a sovrapporsi e rompere.

La navigazione principale necessita di dimensioni coerenti tra le pagine. Le unità REM legalo alla dimensione del carattere di base. Il tuo logo ha bisogno di dimensioni esatte per la coerenza del marchio. I pixel lo mantengono nitido.

Molti utenti cambiano la dimensione predefinita del loro browser per una migliore leggibilità. Quando codifica i pixel, ignori le loro preferenze. Se qualcuno ingrandisce il 125%, il layout a base di pixel cade a pezzi. Le unità relative si adattano automaticamente.

Modi rapidi per scegliere l'unità giusta

Ecco come abbattere le tue scelte senza perdersi nei dettagli:

• Testo e spaziatura attorno a esso: usa Em o REM. Implementazione del pulsante Bili con dimensioni del testo. I margini rimangono proporzionali alle intestazioni.
• Elementi relativi allo schermo: Usa le unità di visualizzazione. Sezioni di eroi che riempiono la maggior parte degli schermi. Barre laterali che assumono percentuali specifiche dello schermo.
• Elementi che necessitano di controllo esatto: utilizzare pixel. Confini sottili che rimangono nitidi. Piccole icone con allineamento perfetto. Fai cadere ombre con compensazioni precise.
• Elementi basati sul contenitore: utilizzare le percentuali. Gride flessibili che si adattano ai genitori. Immagini che scalano con contenitori.

Inizia semplice. Usa pixel per bit decorativi, REM per testo e spaziatura correlata, unità di visualizzazione per sezioni di dimensioni dello schermo e percentuali per contenitori flessibili. Scegli un sistema per elementi correlati e attenersi.

Errori di unità CSS comuni da evitare

Scegli pixel per tutto perché si sentono al sicuro. Il tuo pulsante sembra perfetto a 75 pixel largo sul tuo laptop. Quindi qualcuno apre il tuo sito sul proprio telefono e lo stesso pulsante mangia metà dello schermo. Il tuo logo ha bisogno di dimensioni esatte, ma le aree di contenuto necessitano di flessibilità. Mescola questi approcci in modo casuale e crei caos. Quindi, ecco alcuni suggerimenti per evitare errori di unità CSS standard:

1. Raccogliere pixel per tutto

I pixel si sentono al sicuro perché 20 pixel significa 20 pixel. Semplice, giusto? La barra laterale larga 300 pixel funziona bene sul desktop. Sul cellulare, diventa un blocco enorme che schiaccia i tuoi contenuti in una striscia sottile. Il tuo testo di 16 pixel diventa illeggibile su schermi ad alta densità.

Quando qualcuno aumenta le dimensioni del carattere del loro browser, il layout a base di pixel non si adatta. Contenitori di overflow di testo. I pulsanti scompaiono dietro altri elementi. La tua barra laterale si blocca nei tuoi contenuti principali.

Salva pixel per le cose che necessitano davvero di un controllo esatto: bordi sottili, piccole icone e ombre di caduta. Per tutto il resto, prova a usare unità relative.

2. Unità EM che si moltiplicano fuori controllo

Scala delle unità EM in base alla dimensione del carattere dei genitori. Sembra flessibile, fino a quando non inizi a nidificare. Supponiamo che il tuo contenitore usi 1.2EM e la tua intestazione all'interno di esso utilizza 1,5em. Quell'intestazione diventa 1,8em rispetto alla radice perché 1,2 × 1,5 = 1,8. Continua a nidificare e dimensioni possono fare palle di neve. Cambia una dimensione del carattere genitore e tutto si sposta a valle.

Le unità REM risolvono questo. Fai sempre riferimento all'elemento radice, quindi 2Rem significa la stessa cosa, non importa dove sia usato. Ciò semplifica la tua tipografia da ridimensionare e controllare.

3. Unità di visualizzazione che saltano sul cellulare

Imposta la sezione del tuo eroe su 100VH e riempie perfettamente lo schermo. Tranne che i browser mobili si nascondono e mostrano le loro barre degli indirizzi quando scorre. Safari su iOS e Chrome su Android lo fanno tutti. Quando la barra degli indirizzi scompare, la tua sezione 100vh diventa improvvisamente troppo alta. Quando riappare, i tuoi contenuti vengono tagliati.

La nuova unità DVH si adatta alla dimensione della vista mutevole. Tuttavia, il supporto del browser sta ancora recuperando. Come fallback, funziona una soluzione JavaScript che utilizza le proprietà personalizzate CSS.

Rompere l'accessibilità con dimensioni fisse

Gli utenti regolano spesso le dimensioni predefinite del carattere del browser per migliorare la leggibilità. Quando il testo hardcode, i pulsanti e la spaziatura usando pixel fissi, il layout può rompersi: il testo può traboccare, i pulsanti possono diventare inutilizzabili e gli elementi critici potrebbero scomparire a livelli di zoom più elevati.

Si consiglia di toccare gli obiettivi di almeno 44 × 44 pixel CSS, secondo le linee guida di accessibilità come gli standard WCAG e Apple. Obiettivi più piccoli possono essere impegnativi per gli utenti con disabilità motorie da toccare con precisione.

Invece di bloccare le dimensioni fisse, utilizzare unità scalabili come REM per creare layout che rispettano le preferenze dell'utente. Imposta la dimensione del carattere di base sull'elemento, quindi in scala costantemente le intestazioni, i pulsanti e la spaziatura con unità relative sul tuo sito.

5. Testo minuscolo su schermi ad alta densità

Dispositivi diversi impaccono pixel in modo diverso. Lo schermo del telefono potrebbe avere 400 pixel per pollice mentre il monitor ha 100. Lo stesso conteggio dei pixel sembra completamente diverso su ciascun dispositivo.

Il tuo testo da 14 pixel sembra a posto su un monitor desktop. Su uno schermo telefonico ad alta densità, quegli stessi 14 pixel diventano microscopici. Gli utenti si squittiscono e pizzicano per lo zoom.

I sistemi operativi e i browser gestiscono automaticamente il ridimensionamento quando si utilizzano unità relative. Il tuo testo 1REM diventa più grande su schermi ad alta densità e più piccolo su quelli a bassa densità.

6. Mescolando unità senza piano

Utilizzi REM per alcuni titoli, em per altri e pixel per il testo del corpo. Il tuo design manca di ritmo perché elementi diversi si adattano a tassi diversi. Scegli un sistema per elementi correlati. Se le tue intestazioni usano REM, tutte le intestazioni dovrebbero usare REM. Se la spaziatura ne usa em, continua a usare EM per la spaziatura correlata.

Metti alla prova le tue scelte su dispositivi e impostazioni utente. Controlla come appare il tuo design quando qualcuno aumenta le dimensioni del carattere. Alcuni minuti di test risparmiano ore di correzioni di bug in seguito.

Come le unità avanzate di Divi 5 semplificano la gestione CSS

Il lottare con le unità CSS invecchia velocemente. Trascorri ore a modificare i valori, testare su diversi dispositivi e fissare layout rotti. Divi 5 lo cambia completamente. Il nuovo sistema elimina le congetture dalla selezione dell'unità e ti dà il controllo visivo sul comportamento reattivo senza toccare il codice. Ma prima, capiamo cos'è Divi.

Cos'è Divi?

Divi è un costruttore di siti Web che trasforma WordPress in qualcosa che in realtà ha senso per le persone che vogliono che i loro siti abbiano un bell'aspetto.

Trascina uno dei 200+ moduli intorno alla tua pagina. Cambia il testo proprio dove si trova. Scegli nuovi colori e guardali apparire immediatamente. Stai lavorando alla cosa reale, non a una modalità di anteprima che ti sta.

Il tema include oltre 2000 layout che non fanno schifo. Design reali per ristoranti, fotografi, consulenti e dozzine di altre aziende. Trova uno che ti piace e lo modifica fino a quando non ti sembra giusto.

Il builder a tema ti consente di controllare tutto. Crea intestazioni che non sembrano generiche, costruisci pagine di blog straordinarie e trasforma le tue 404 pagine in qualcosa che le persone potrebbero effettivamente voler vedere.

Crea siti Web utilizzando AI

Divi Ai funziona proprio nella tua area di progettazione. Hai bisogno di testo? Lo scrive.

Vuoi immagini? Li fa. Puoi anche descrivere le modifiche fotografiche e gestisce il lavoro.

Allo stesso modo, per il codice e le nuove sezioni.

Divi Quick Sites risolve quel momento terribile quando fissi una pagina vuota senza idea di dove cominciare. Scegli dai siti di partenza che il nostro team ha effettivamente progettato, completo di immagini e opere d'arte originali.

Oppure descrivi la tua attività per Divi SITES QUEST + Divi AI e lascia che costruisca qualcosa da zero.

Questi siti costruiti dall'intelligenza artificiale avranno titoli, copia e immagini reali che corrispondono a ciò che l'hai detto. Genera tutto con l'intelligenza artificiale, prendi le foto di Unsplash o lascia cadere i segnaposto per i tuoi scatti. Imposta prima i tuoi caratteri e colori, quindi lascia che l'IA lavori attorno a loro. Puoi ancora modificare tutto in seguito.

Cosa c'è di nuovo in Divi 5

Divi 5 ricostruisce tutto da zero. Abbiamo demolito il vecchio sistema di code e creato qualcosa che funziona meglio con gli standard web di oggi. I siti si caricano più velocemente, l'editor risponde più rapidamente e si ottiene l'accesso a strumenti impossibili prima.

Ma cosa c'è di nuovo? Dai un'occhiata:

Sistema di layout Flexbox

Costruire siti Web moderni e reattivi in Divi è ora più veloce e intuitivo. Abbiamo introdotto un sistema di layout Flexbox completo in Divi 5, offrendo semplici controlli per allineamento verticale, avvolgimento dei contenuti e spaziatura. Crea i layout esatti che desideri senza combattere con il codice o utilizzare soluzioni complesse.

Preset del gruppo di opzioni

I preimpostazioni del gruppo di opzioni ti consentono di salvare gli stili che puoi mescolare e abbinare ovunque. Fai uno stile ombra una volta, quindi usalo su pulsanti, carte, sezioni, qualunque cosa ne abbia bisogno. Aggiorna il preimpostazione e tutto cambia immediatamente in tutto il tuo sito.

Variabili di progettazione

I colori del marchio, i caratteri e la spaziatura vivono tutti in un punto ora. È possibile passare dal blu al verde modificando una variabile. L'intero sito si aggiorna automaticamente, quindi non dovrai cacciare dozzine di moduli.

Unità avanzate

Ora puoi utilizzare tutte le unità CSS avanzate con Divi 5: da PX a VW/VH. Le funzioni CSS funzionano anche nel costruttore ora. Vuoi una sezione che è l'80% dell'altezza dello schermo meno l'intestazione? Digita calc (80vh - 100px) e sei impostato. L'interfaccia gestisce il clamp (), min (), max (): tutti quei trucchi reattivi.

Righe nidificate

Le righe vanno in altre file ora, profonde come hai bisogno. Costruisci layout di riviste complesse o pagine dettagliate di prodotti senza combattere la struttura. Ogni livello ti dà il pieno controllo sulla spaziatura e sul comportamento del dispositivo.

Modifica con un clic

Punta e fai clic su ovunque sulla tua pagina per iniziare la modifica. I giorni di ricerca di piccoli pulsanti di modifica o navigare attraverso più menu sono dietro di noi.

Punti di interruzione personalizzabili

Invece di essere bloccati con tre, i punti di interruzione personalizzabili di Divi 5 consente di abilitare sette dimensioni dello schermo diverse. Imposta ogni punto di interruzione esattamente dove il tuo design ne ha bisogno, sia 1200px per monitor di grandi dimensioni, 900px per tablet o 650px per i telefoni.

Apazio di lavoro multi-pannello

Organizza i tuoi pannelli dell'area di lavoro come vuoi. Mantieni più pannelli di impostazione aperti contemporaneamente invece di saltare costantemente tra diverse aree di interfaccia.

Gestione degli attributi

Copia elementi specifici tra diverse parti del tuo sito con precisione chirurgica. Prendi solo la spaziatura da un elemento, solo i colori di un altro, o solo i preset di un terzo. Niente più trasferimenti tutto o nulla.

Ridimensionamento della tela

Regola la dimensione dell'area di lavoro per visualizzare in anteprima il modo in cui il tuo sito appare su dispositivi diversi. Vedi viste mobili, tablet e desktop senza passare a modalità di anteprima separate.

Miglioramenti delle prestazioni

Adesso tutto sembra più scattante. Le pagine si caricano più rapidamente, il costruttore risponde più velocemente e i layout complessi non impanellano l'interfaccia come prima.

Gruppi di moduli

Raggruppare più moduli in un contenitore. Tratta blocchi di testo, immagini e pulsanti come una singola unità. Spostali insieme, modellali insieme e copia tutto su altre pagine.

Sistema a colori HSL

Costruisci schemi di colore con controlli di tonalità, saturazione e leggerezza. Crea varianti di colore del marchio che sembrano professionali. La matematica crea automaticamente combinazioni piacevoli.

Altri sono in arrivo ...

• Loop Builder: crea modelli per ripetere contenuti come griglie del blog o elenchi di prodotti. Progettalo una volta, lascia che il sistema lo riempia con il tuo contenuto reale.
• Moduli WooCommerce: moduli specifici del negozio per griglie del prodotto, pagine di singoli prodotti e funzionalità del carrello. Tutto ciò che è necessario negozi online, costruito appositamente per la vendita.

Usando le variabili CSS in Divi 5

Lo stile del sito Web diventa noioso quando hai bisogno di valori coerenti tra più elementi. Le variabili CSS risolvono questo problema memorizzando valori riutilizzabili in una posizione. Divi 5 supporta sia le variabili CSS tradizionali che il suo sistema di variabili di design, dandoti flessibilità nel modo in cui gestisci l'aspetto del tuo sito.

Divi 5 accetta qualsiasi unità CSS direttamente nei suoi campi di input. Scrivi valori REM, VW o percentuali in cui in precedenza potevi usare solo pixel. Il costruttore elabora queste unità immediatamente senza configurazione aggiuntiva.

Le funzioni CSS funzionano allo stesso modo. Immettere il morsetto (1rem, 4vw, 3Rem) per la tipografia fluida o Min (500px, 90%) per larghezze reattive. Visual Builder gestisce questi calcoli in tempo reale mentre progetti.

Le variabili si integrano perfettamente con questo sistema. Definire una variabile CSS come –header-height: 80px, quindi fare riferimento usando var (–header-height) in qualsiasi campo. Divi riconosce la sintassi e applica automaticamente il valore memorizzato.

Questa integrazione diretta significa che è possibile mescolare unità tradizionali, moderne funzioni CSS e variabili all'interno dello stesso progetto. Utilizzare pixel per bordi, unità di visualizzazione per sezioni e variabili per misurazioni ripetute.

Variabili di progettazione: un modo migliore per applicare unità avanzate

Le variabili di progettazione sono l'alternativa integrata di Divi 5 alle variabili CSS. Funzionano interamente attraverso l'interfaccia visiva senza richiedere alcuna conoscenza del codice. Crei e gestisci queste variabili utilizzando il pannello a variabile di Divi.

Queste variabili si estendono oltre numeri e colori semplici. Memorizza URL di immagine completa, contenuto di testo o valori di styling complessi. Quando si aggiorna una variabile di progettazione, ogni elemento che utilizza IT cambia istantaneamente su tutto il tuo sito Web.

Divi 5 offre diversi tipi variabili per gestire le diverse esigenze dei contenuti:

• Le variabili di colore archiviano codici esagonali, gradienti, colori del marchio, colori di testo, sfondi e bordi.
• Le variabili dei caratteri gestiscono la tipografia a livello globale oltre le limitazioni del personalizzatore del tema e il lavoro per eventuali aree di testo.
• Le variabili numeriche accettano qualsiasi unità CSS più funzioni CSS come CLAMP (), CALC (), min () e max () per spaziatura, dimensionamento e animazione.
• Le variabili di immagine archiviano immagini riutilizzabili come loghi, sfondi e motivi.
• Le variabili di testo archiviano stringhe di testo riutilizzabili come informazioni di contatto, slogan e dettagli aziendali.
• Le variabili URL archiviano collegamenti riutilizzabili per social media, affiliati, promozioni e collegamenti Tel/Mailto.

Impostazione di unità CSS con variabili di progettazione numerica

Le variabili numeriche ti danno gli elementi costitutivi per i progetti che rimangono coerenti. Funzionano meglio quando ripeti la stessa misurazione tra elementi diversi. Inoltre, sono molto più semplici del wrestling con il codice CSS.

Trova il gestore variabile nell'interfaccia Divi. Crea una nuova variabile numero e dargli un valore adatto al tuo design. Usa nomi chiari come "Ponga del pulsante" o "Gap di sezione" anziché etichette vaghe.

Creazione della tua libreria variabile

Puoi aggiungere variabili comuni, come:

• "Pulsante" a 3Rem-Scala dei pulsanti con dimensione del testo
• "Sezione-Padding" a 8VH-Adattamento spaziatura all'altezza dello schermo
• "Radius di confine" a 0,5REM-gli angoli arrotondati rimangono proporzionali
• "Hero-Height" a 75VH-Le sezioni Hero riempiono la maggior parte degli schermi
• "Border fine" a 1px: le linee croccanti rimangono nitide
• “Fluid-text” a FLAMP (1Rem, 2,5VW, 2Rem)-Scala del testo SIMRALI
• "Widdth Content Width" a Min (90%, 1200px)-I contenitori rimangono leggibili
• "Dynamic-Gap" a Calc (2REM + 2VW)-La spaziatura cresce con la dimensione dello schermo

Applicarli nelle impostazioni del modulo, della sezione o della riga.

Le tue variabili REM sono in scala con dimensioni del testo. Le unità VH si adattano a schermi più piccoli. Variabili con morsetto () regola automaticamente tra i valori minimi e massimi.

Building Preset collegati

Dopo aver accumulato l'elemento con variabili, salva la spaziatura come preimpostazione del gruppo di opzioni. Questo preimpostazione ora contiene riferimenti alle tue variabili numeriche.

Quando si applica questo preimpostazione ad altri moduli, ereditano la stessa spaziatura a base variabile. Aggiorna "Card-Padding" da 2Rem a 3Rem nel gestore variabile e ogni elemento che utilizza tale preimpostazione si aggiorna automaticamente.

Il preimpostazione rimane lo stesso, ma i valori cambiano. Funziona per tutte le variabili di design: colori, caratteri, immagini, testo e URL. I tuoi preset diventano dinamici anziché statici, rendendo possibili aggiornamenti a livello del sito con una singola modifica.

Costruisci siti Web migliori con unità CSS e Divi 5

Ottenere le unità CSS giuste modifica il modo in cui si creano siti Web. Risolverai un minor numero di layout rotti e creerai design che funzionano tra i dispositivi. Dettagli precisi per chiodo pixel. Le unità relative si adattano a diversi schermi e preferenze dell'utente.

Divi 5 rende un gioco da ragazzi con unità CSS avanzate. Digita qualsiasi unità nel costruttore e vedi i risultati istantaneamente. Le variabili di progettazione mantengono le misurazioni coerenti sul tuo sito. Cambia un valore e tutto ciò che è collegato aggiorna automaticamente.

I tuoi siti Web meritano meglio delle battaglie di breakpoint e delle correzioni di layout infinite. Prova Divi 5 e guarda le unità CSS trasformare le sessioni di design frustranti in flussi di lavoro lisci.