Diferența dintre unitățile CSS absolute și relative

Alegerea unităților CSS potrivite este mai mult decât un detaliu tehnic. Este ceea ce vă ajută proiectarea să rămână consecventă, flexibilă și receptivă pe toate dispozitivele. Pixelii pot părea opțiunea ușoară, dar nu se comportă întotdeauna în mod previzibil pe diferite ecrane.

În această postare, vom explica diferența dintre unitățile absolute și relative și vom arăta cum Divi 5 vă ajută să le utilizați mai eficient de la început.

Unitățile CSS explicate: De ce contează pentru site -ul dvs. web?

Unitățile CSS controlează cât de mare apare totul pe site -ul dvs. Alegeți greșit, iar designul dvs. se rupe pe diferite dispozitive.

Majoritatea oamenilor folosesc pixeli, deoarece sunt simpli și ușor de înțeles. Dar pixelii nu se adaptează în mod natural la designul receptiv. Acestea necesită interogări media sau funcții CSS precum Clamp () pentru a răspunde la modificările ecranului.

Alte unități se adaptează automat. Scala de unități Viewport cu fereastra browserului. Unități relative precum dimensiunea EM se bazează pe textul din jur. Diferite unități rezolvă probleme diferite. Alegeți bine, iar designul dvs. se adaptează pe dispozitive fără muncă suplimentară.

Îndepărtarea unităților absolute: Când dimensiunile fixe funcționează cel mai bine

Unitățile absolute păstrează aceeași dimensiune indiferent de ce se întâmplă în jurul lor. Dacă setați ceva la 20 de pixeli lățime, acesta rămâne 20 de pixeli, indiferent dacă cineva îl vede pe un telefon sau pe un monitor de desktop masiv. Valoarea nu se modifică niciodată pe baza dimensiunii ecranului, a elementelor părinte sau a setărilor browserului.

Pixeli (PX) stăpânesc acest spațiu. Există și alte unități absolute, cum ar fi centimetri, milimetri și inci, dar aparțin designului de imprimare unde contează măsurătorile fizice. Pentru design web, pixelii gestionează aproape toate măsurarea absolută de care aveți nevoie.

De ce pixelii funcționează excelent pentru mici detalii

Unele elemente de proiectare au nevoie de control exact. O bordură de 1 pixeli ar trebui să arate crocant și subțire peste tot. Umbrele de picătură au nevoie de precizie pentru a arăta corect. Pictogramele mici funcționează mai bine atunci când rămân consecvente pe dispozitive.

Pixelii lucrează excelent pentru aceste mici detalii. Bordul butonului dvs. ar trebui să aibă o grosime de 2 pixeli, acea umbră subtilă ar trebui să fie exact de 4 pixeli compensați, iar pictograma dvs. de navigare ar trebui să fie exact de 24 de pixeli pătrați pentru aliniere perfectă.

Aceste măsurători nu trebuie să se extindă cu dimensiunea ecranului. O bordură care este 1 pixel pe desktop ar trebui să rămână 1 pixel pe mobil. Realizarea a 2 pixeli pe mobil ar părea groasă și neplăcută.

Alte elemente funcționează bine și cu pixeli. Logo -urile de marcă folosesc adesea pixeli pentru consistența mărcii. Elementele decorative mici, cum ar fi punctele sau liniile, au nevoie de dimensionare exactă. Încărcarea spinner -urilor și barele de progres funcționează mai bine cu dimensiuni fixe.

Făcând pixeli să răspundă cu interogări media

Pixelii nu sunt complet rigizi. Interogările media vă permit să schimbați diferite valori de pixeli la diferite dimensiuni ale ecranului. Titlul dvs. ar putea folosi text de 32 de pixeli pe desktop, apoi săriți la 28 de pixeli pe tablete și 24 pe telefoane.

Această abordare necesită mai multă muncă decât unitățile relative. Trebuie să definiți punctele de întrerupere și să scrieți reguli separate pentru fiecare dimensiune a ecranului, dar aveți un control total asupra modului în care lucrurile privesc fiecare dimensiune.

Această abordare funcționează bine atunci când doriți un control specific la fiecare dimensiune a ecranului. Decideți exact cum arată textul dvs. pe telefoane versus tablete față de desktop -uri la dimensiuni specifice. Fără surprize.

CSS -ul suplimentar merită pentru elemente care au nevoie de dimensionare precisă. Logo -urile arată cel mai bine atunci când stau exact dimensiunea potrivită pentru fiecare dispozitiv. Elementele de navigație au adesea nevoie de dimensiuni specifice pentru a funcționa corect. Granițele și umbrele decorative depind de măsurători exacte pentru a arăta crocant.

Înțelegerea unităților relative: abordarea flexibilă a designului web

În schimb, unitățile relative se întind și se micșorează pe baza a ceea ce este în jurul lor. Această flexibilitate face ca site -urile să funcționeze pe telefoane, tablete și computere fără a se rupe. Spre deosebire de unitățile absolute care rămân fixe, unitățile relative se adaptează la dimensiunea ecranului, elementele părinte sau preferințele utilizatorului.

Aceste unități rezolvă problemele pe care le creează pixelii. Butonul dvs. de 75 de pixeli funcționează bine pe desktop, dar devine dominant pe mobil. Unitățile relative se ajustează automat, salvându -vă de la scrierea stilurilor separate pentru fiecare dimensiune a ecranului.

Cum se construiesc unitățile EM între ele

Unitățile EM sunt relative la dimensiunea fontului elementului lor părinte imediat. Dacă dimensiunea fontului de bază este 16px și setați un recipient la dimensiunea fontului: 1.25EM, aceasta devine 20px. Un element copil din interiorul său setat la 1.5EM va fi acum 30px (1,5 × 20px), nu 24px, deoarece se bazează pe părinte, nu pe rădăcină.

Acest efect de compunere este puternic pentru distanțarea scalabilă în jurul textului. Dar dacă păstrați elemente de cuib cu dimensiuni de fonturi bazate pe EM, valorile dvs. pot crește rapid în dimensiunea. Unitățile EM funcționează cel mai bine pentru căptușeală, marjă sau elemente strâns legate de textul din apropiere. Pentru o dimensiune constantă pe aspectul dvs., luați în considerare utilizarea REM în schimb.

Unitățile REM păstrează lucrurile simple

REM privește întotdeauna elementul HTML rădăcină. Setați ceva la 2rem și are aceeași dimensiune peste tot pe pagina dvs.

Majoritatea browserelor implicite la 16px pentru rădăcină. Deci 1rem = 16px, 2rem = 32px. Schimbați dimensiunea rădăcinii și tot ceea ce este la scară bazată pe REM.

Unitățile Viewport Urmați ecranul

Scala de unități Viewport cu fereastra browserului. 50VW = jumătate din lățimea ecranului și 100VH = înălțimea ecranului complet. Acest lucru este excelent pentru secțiunile de eroi care completează ecranul.

De obicei, browserele mobile nu se joacă bine cu unitățile de vizionare. Bara de adrese se ascunde și se arată când derulați, iar secțiunea dvs. de 100VH s -ar putea tăia atunci când apare bara de adrese.

VMIN și VMAX compară lățimea și înălțimea ecranului, apoi alegeți unul. VMIN utilizează oricare dintre acestea este mai mic. Pe un telefon ținut în poziție verticală, lățimea este mai mică, deci 50Vmin = 50% din lățime. Rotiți -vă pe peisaj și înălțimea devine mai mică, astfel încât 50Vmin comută la 50% din înălțime. VMAX face opusul: alege întotdeauna dimensiunea mai mare. Acest lucru este util pentru elementele care trebuie să se extindă cu măsurarea mai mare.

Procentele se adaptează la containere

Lățimile bazate pe procent se raportează întotdeauna la lățimea elementului părinte. Procentele de înălțime se pot extinde la fel, dar numai dacă părintele are o înălțime definită; În caz contrar, s -ar putea să nu funcționeze așa cum era de așteptat.

Procentele de căptușeală și marjă sunt întotdeauna calculate din lățimea părintelui, chiar și pentru valorile de sus și de jos. Acest lucru face posibilă crearea de distanțe consistente și machete proporționale, în special în proiectele de fluide.

Diferența

Unitățile absolute sunt ca un conducător rigid, în timp ce unitățile relative se comportă mai mult ca o bandă de măsurare. Ambele măsoară lucrurile, dar răspund foarte diferit atunci când condițiile se schimbă. Iată cum se compară:

Majoritatea dezvoltatorilor ajung să folosească ambele: pixeli pentru lucrurile mici care trebuie să rămână unități crocante și relative pentru piesele structurale mari care trebuie să se flexeze.

Alegerea unităților potrivite pentru designul dvs.

Diferite părți ale site -ului dvs. web au nevoie de abordări diferite. Unele elemente rămân la aceeași dimensiune peste tot, în timp ce altele se adaptează pe baza dimensiunii ecranului sau a setărilor utilizatorului. Majoritatea dezvoltatorilor depășesc acest lucru. Există o modalitate mai simplă: potriviți -vă cu unitatea cu ceea ce doriți să facă acel element.

Gândiți -vă mai întâi la utilizatorii dvs.

Oamenii răsfoiesc site -ul dvs. în moduri neașteptate. Cineva vizitează pe telefonul lor. Textul tău arată minuscul, așa că se prind pentru a mări. Dacă ați construit cu unități REM, totul crește proporțional. Dacă ați folosit pixeli peste tot, lucrurile încep să se suprapună și să se rupă.

Navigarea principală are nevoie de dimensionare constantă pe pagini. Unitățile REM îl leagă de dimensiunea fontului de bază. Logo -ul dvs. are nevoie de dimensiuni exacte pentru consistența mărcii. Pixelii îl păstrează crocant.

Mulți utilizatori își schimbă dimensiunea implicită a fontului browserului pentru o mai bună lizibilitate. Când pixeli hardcode, le ignori preferințele. Dacă cineva mărește până la 125%, aspectul tău bazat pe pixeli se destramă. Unitățile relative se adaptează automat.

Moduri rapide de a alege unitatea potrivită

Iată cum să vă descompuneți alegerile fără a vă pierde în detalii:

• Text și distanțare în jurul său: folosiți EM sau REM. Scale de căptușeală cu buton cu dimensiunea textului. Marjele rămân proporționale cu rubricile.
• Elemente legate de ecran: Utilizați unitățile Viewport. Secțiuni de eroi care umplu majoritatea ecranelor. Bare laterale care iau procente specifice de ecran.
• Elemente care au nevoie de control exact: Utilizați pixeli. Borde subțiri care rămân crocante. Pictograme mici cu aliniere perfectă. Aruncați umbre cu compensări precise.
• Elemente bazate pe containere: utilizați procente. Grile flexibile care se adaptează părinților. Imagini care scalează cu containere.

Începe simplu. Utilizați pixeli pentru biți decorativi, REM pentru text și distanțare aferentă, unități de viewport pentru secțiuni de dimensiuni de ecran și procente pentru containere flexibile. Alegeți un sistem pentru elemente conexe și rămâneți cu acesta.

Greșeli comune ale unității CSS de evitat

Alegeți pixeli pentru orice, pentru că se simt în siguranță. Butonul dvs. arată perfect la 75 de pixeli lățime pe laptop. Apoi cineva îți deschide site -ul pe telefonul lor și același buton mănâncă jumătate din ecran. Logo -ul dvs. are nevoie de dimensiuni exacte, dar zonele dvs. de conținut au nevoie de flexibilitate. Amestecați aceste abordări la întâmplare și creați haos. Iată, așadar, câteva sfaturi despre evitarea greșelilor standard ale unităților CSS:

1..

Pixelii se simt în siguranță, deoarece 20 de pixeli înseamnă 20 de pixeli. Simplu, nu? Bara laterală de 300 de pixeli funcționează bine pe desktop. Pe mobil, devine un bloc masiv care îți zdrobește conținutul într -o bandă subțire. Textul dvs. de 16 pixeli devine necitibil pe ecranele de înaltă densitate.

Când cineva își mărește dimensiunea fontului browserului, aspectul tău bazat pe pixeli nu se adaptează. Containere de revărsare a textului. Butoanele dispar în spatele altor elemente. Bara laterală se prăbușește în conținutul principal.

Salvați pixeli pentru lucruri care au nevoie cu adevărat de control exact: margini subțiri, pictograme mici și umbre de picătură. Pentru orice altceva, încercați să utilizați unități relative.

2. Unitățile EM care se înmulțesc de sub control

Scala de unități EM pe baza dimensiunii fontului părintelui lor. Sună flexibil, până când începi să cuibărești. Spuneți că containerul dvs. folosește 1.2EM, iar îndreptarea în interiorul acestuia folosește 1.5EM. Această rubrică devine 1,8em în raport cu rădăcina, deoarece 1,2 × 1,5 = 1,8. Continuați cuibul, iar dimensiunile pot zăpadă. Schimbați dimensiunea fontului părinte și totul se schimbă în aval.

Unitățile REM Remediază acest lucru. Ele referă întotdeauna la elementul rădăcină, deci 2rem înseamnă același lucru, indiferent unde este folosit. Acest lucru face ca tipografia dvs. să fie mai ușoară la scară și control.

3. Unitățile Viewport care sară pe mobil

Setați secțiunea Hero la 100VH și umple perfect ecranul. Cu excepția browserelor mobile se ascund și arată barele de adrese atunci când derulați. Safari pe iOS și Chrome on Android toate fac acest lucru. Când bara de adrese dispare, secțiunea dvs. de 100VH devine brusc prea înaltă. Când reapare, conținutul dvs. este întrerupt.

Cea mai nouă unitate DVH se adaptează la schimbarea dimensiunii Viewport. Totuși, suportul browserului este în continuare. Ca un Fallback, funcționează o soluție JavaScript folosind CSS Custom Properties.

Spargerea accesibilității cu dimensiuni fixe

Utilizatorii își ajustează adesea dimensiunea implicită a fontului browserului pentru a îmbunătăți lizibilitatea. Când textul, butoanele și distanțarea cu coduri dure, folosind pixeli fixi, aspectul tău se poate rupe - textul se poate revărsa, butoanele pot deveni inutilizabile, iar elementele critice ar putea dispărea la niveluri mai mari de zoom.

Obiectivele de atingere sunt recomandate să fie de cel puțin 44 × 44 pixeli CSS, în conformitate cu ghidurile de accesibilitate, cum ar fi WCAG și Standardele Apple. Obiectivele mai mici pot fi dificile pentru utilizatorii cu deficiențe de motor pentru a atinge cu exactitate.

În loc să blocați dimensiuni fixe, utilizați unități scalabile precum REM pentru a crea machete care respectă preferințele utilizatorului. Setați dimensiunea fontului de bază pe element, apoi scară constant rubricile, butoanele și distanțarea cu unități relative pe site -ul dvs.

5. Text minuscul pe ecrane de înaltă densitate

Diferite dispozitive împachetează pixeli diferit. Ecranul telefonului dvs. ar putea avea 400 de pixeli pe inch, în timp ce monitorul dvs. are 100. Același număr de pixeli arată complet diferit pe fiecare dispozitiv.

Textul dvs. de 14 pixeli arată bine pe un monitor de desktop. Pe un ecran de telefon de înaltă densitate, aceiași 14 pixeli devin microscopici. Utilizatorii se strecoară și se prind pentru a mări.

Sistemele de operare și browserele gestionează automat scalarea atunci când utilizați unități relative. Textul dvs. 1REM devine mai mare pe ecrane de înaltă densitate și mai mic pe cele de densitate joasă.

6. Amestecarea unităților fără un plan

Folosiți REM pentru unele rubrici, EM pentru alții și pixeli pentru textul corpului. Designul dvs. nu are ritm, deoarece diferite elemente se extind la rate diferite. Alegeți un sistem pentru elemente conexe. Dacă rubricile dvs. folosesc REM, toate rubricile dvs. ar trebui să utilizeze REM. Dacă distanțarea dvs. folosește EM, continuați să folosiți EM pentru distanțare aferentă.

Testați -vă alegerile pe dispozitive și setările utilizatorului. Verificați cum arată designul dvs. atunci când cineva își crește dimensiunea fontului. Câteva minute de testare economisesc ore de soluții de erori mai târziu.

Cum simplifică managementul CSS al Divi 5

Lupta cu unitățile CSS îmbătrânește repede. Petreceți ore întregi modificând valorile, testarea pe diferite dispozitive și fixați machete rupte. Divi 5 schimbă acest lucru complet. Noul sistem scoate ghicitul din selecția unității și vă oferă un control vizual asupra comportamentului receptiv fără a atinge codul. Dar mai întâi, să înțelegem ce este Divi.

Ce este Divi?

Divi este un constructor de site -uri care transformă WordPress în ceva care are sens pentru persoanele care doresc ca site -urile lor să arate bine.

Trageți oricare dintre cele 200 de module din jurul paginii dvs. Schimbați textul chiar acolo unde se află. Alegeți culori noi și urmăriți -le apărând imediat. Lucrezi la adevăratul lucru, nu la un mod de previzualizare care îți revine.

Tema include 2000+ machete care nu sug. Designuri reale pentru restaurante, fotografi, consultanți și zeci de alte afaceri. Găsiți unul care vă place și reglați -l până când se simte corect.

Constructorul de teme vă permite să controlați totul. Creați antete care nu arată generice, construiți pagini de blog standout și transformați -vă 404 de pagini în ceva ce oamenii ar putea dori să vadă.

Construiți site -uri web folosind AI

Divi AI funcționează chiar în zona dvs. de proiectare. Aveți nevoie de text? O scrie.

Vrei imagini? Le face. Puteți descrie chiar și modificările foto și gestionează lucrarea.

De asemenea, pentru cod și secțiuni noi.

Site -urile rapide Divi rezolvă acel moment groaznic când te uiți la o pagină goală, fără niciun indiciu de unde să începi. Alegeți de pe site -urile de pornire pe care echipa noastră a proiectat -o efectiv, completată cu imagini originale și lucrări de artă.

Sau descrieți -vă afacerea în Divi Quick Sites + Divi AI și lăsați -o să construiască ceva de la zero.

Aceste site-uri construite AI vor avea titluri reale, copiere și imagini care se potrivesc cu ceea ce i-ați spus. Generați totul cu AI, faceți fotografii de la Unsplash sau aruncați în localități pentru propriile fotografii. Setați -vă mai întâi fonturile și culorile, apoi lăsați -o să funcționeze în jurul lor. Puteți edita în continuare totul după aceea.

Ce este nou în Divi 5

Divi 5 reconstruiește totul de la zero. Am scăpat de vechiul sistem de coduri scurte și am construit ceva care funcționează mai bine cu standardele web de astăzi. Site -urile se încarcă mai repede, editorul răspunde mai repede și veți avea acces la instrumente imposibile înainte.

Dar ce este nou? Aruncați o privire:

Sistem de aspect FlexBox

Construirea de site -uri moderne, receptive în Divi, este acum mai rapidă și mai intuitivă. Am introdus un sistem complet de aspect FlexBox în DIVI 5, oferindu -vă controale simple pentru aliniere verticală, ambalare de conținut și distanțare. Creați machetele exacte pe care le doriți fără a lupta cu codul sau utilizarea soluțiilor complexe.

Presetări de grupuri de opțiuni

Presetări de grupuri de opțiuni vă permit să salvați stiluri pe care le puteți amesteca și potrivi oriunde. Faceți un stil de umbră o dată, apoi folosiți -l pe butoane, cărți, secțiuni, orice are nevoie de el. Actualizați presetarea și totul se schimbă instantaneu pe întregul site.

Variabile de proiectare

Culorile de marcă, fonturile și distanțarea trăiesc acum într -un singur loc. Puteți trece de la albastru la verde prin editarea unei variabile. Întregul dvs. site se actualizează automat, astfel încât nu va trebui să vânați prin zeci de module.

Unități avansate

Acum, puteți utiliza toate unitățile CSS avansate cu Divi 5: de la PX la VW/VH. Funcțiile CSS funcționează, de asemenea, acum în constructor. Doriți o secțiune care este 80% din înălțimea ecranului, minus antetul? Tip Calc (80VH - 100px) și sunteți setat. Interfața gestionează Clamp (), min (), max (): toate acele trucuri receptive.

Rânduri cuibărite

Rândurile intră acum în alte rânduri, la fel de adânc pe cât ai nevoie. Construiți machete complexe de reviste sau pagini de produse detaliate fără a lupta cu structura. Fiecare nivel vă oferă un control complet asupra distanției și comportamentului dispozitivului.

Editare cu un singur clic

Puncte și faceți clic oriunde pe pagina dvs. pentru a începe editarea. Zilele de căutare a butoanelor de editare minuscule sau de navigare prin mai multe meniuri sunt în spatele nostru.

Puncte de întrerupere personalizabile

În loc să fii blocat cu trei, punctele de întrerupere personalizabile ale Divi 5 vă permite să activați șapte dimensiuni diferite ale ecranului. Setați fiecare punct de întrerupere exact acolo unde are nevoie de designul dvs., indiferent dacă este 1200px pentru monitoare mari, 900px pentru tablete sau 650px pentru telefoane.

Spațiu de lucru cu mai multe panouri

Aranjați -vă panourile din spațiul de lucru, oricum doriți. Mențineți mai multe panouri de setare deschise simultan în loc să sări constant între diferite zone de interfață.

Managementul atributelor

Copiați elemente specifice între diferite părți ale site -ului dvs. cu precizie chirurgicală. Prindeți doar distanțarea dintr -un element, doar culorile de la altul sau doar presetările de la o treime. Nu mai sunt transferuri toate sau nimic.

Scalare de pânză

Reglați dimensiunea spațiului de lucru pentru a previzualiza modul în care site -ul dvs. apare pe diferite dispozitive. Consultați vizualizări mobile, tablete și desktop fără a trece la moduri de previzualizare separate.

Îmbunătățirile performanței

Totul se simte mai înfiorător acum. Paginile se încarcă mai repede, constructorul răspunde mai repede, iar machete complexe nu împiedică interfața așa cum obișnuiau.

Grupuri de module

Blocați mai multe module într -un singur recipient. Tratați blocurile de text, imaginile și butoanele ca o singură unitate. Mutați -le împreună, stilizați -le împreună și copiați totul în alte pagini.

Sistem de culori HSL

Construiți scheme de culori cu controale de nuanță, saturație și lejeritate. Creați variații de culoare ale mărcii care arată profesionist. Matematica creează automat combinații plăcute.

Mai multe sunt pe drum ...

• Buclă Builder: Construiți șabloane pentru repetarea conținutului, cum ar fi grilele de blog sau listările de produse. Proiectați -l o dată, lăsați sistemul să -l completeze cu conținutul dvs. real.
• Module WooCommerce: module specifice magazinului pentru rețele de produse, paginile individuale de produs și funcționalitatea coșului. Totul magazinelor online au nevoie, construit special pentru vânzare.

Utilizarea variabilelor CSS în Divi 5

Stilul site -ului web devine obositor atunci când aveți nevoie de valori consistente pe mai multe elemente. Variabilele CSS rezolvă acest lucru prin stocarea valorilor reutilizabile într -o singură locație. Divi 5 acceptă atât variabilele CSS tradiționale, cât și propriul sistem de variabile de proiectare, oferindu -vă flexibilitate în modul în care gestionați aspectul site -ului dvs.

Divi 5 acceptă orice unitate CSS direct în câmpurile sale de intrare. Scrieți valori REM, VW sau procentuale în care anterior puteți utiliza doar pixeli. Constructorul procesează aceste unități imediat fără configurare suplimentară.

Funcțiile CSS funcționează la fel. Introduceți CLAMP (1REM, 4VW, 3REM) pentru tipografie fluidă sau min (500px, 90%) pentru lățimi receptive. Visual Builder gestionează aceste calcule în timp real, în timp ce proiectați.

Variabilele se integrează perfect cu acest sistem. Definiți o variabilă CSS, cum ar fi-Header-Height: 80px, apoi referiți-o folosind Var (–Header-Height) în orice câmp. Divi recunoaște sintaxa și aplică automat valoarea stocată.

Această integrare directă înseamnă că puteți amesteca unități tradiționale, funcții CSS moderne și variabile în cadrul aceluiași proiect. Utilizați pixeli pentru granițe, unități de vizionare pentru secțiuni și variabile pentru măsurători repetate.

Variabile de proiectare: o modalitate mai bună de a aplica unități avansate

Variabilele de proiectare sunt alternativa încorporată de Divi 5 la variabilele CSS. Ele funcționează în întregime prin interfața vizuală fără a necesita cunoștințe de cod. Creați și gestionați aceste variabile folosind panoul de manager variabil al DIVI.

Aceste variabile se extind dincolo de numere și culori simple. Stocați URL -uri complete de imagine, conținut text sau valori complexe de stil. Când actualizați o variabilă de proiectare, fiecare element care îl utilizează se schimbă instantaneu pe întregul site web.

Divi 5 oferă mai multe tipuri variabile pentru a gestiona diferite nevoi de conținut:

• Variabilele de culori stochează coduri hexagonale, gradienți, culori de marcă, culori de text, fundaluri și granițe.
• Variabilele de font gestionează tipografia la nivel global, dincolo de limitările de personalizare a temelor și funcționează pentru orice zone de text.
• Variabilele de număr acceptă orice unitate CSS plus funcții CSS precum Clamp (), Calc (), Min () și Max () pentru distanțare, dimensionare și animație.
• Variabilele de imagine stochează imagini reutilizabile precum logo -uri, fundaluri și modele.
• Variabilele de text stochează șiruri de text reutilizabile, cum ar fi informațiile de contact, liniile de etichetă și detaliile de afaceri.
• Variabilele URL stochează link -uri reutilizabile pentru rețelele de socializare, afiliați, promos și link -uri Tel/Mailto.

Configurarea unităților CSS cu variabile de proiectare a numărului

Variabilele de număr vă oferă blocurile de construcție pentru proiectele care rămân consecvente. Ei funcționează cel mai bine atunci când repetați aceeași măsurare pe elemente diferite. În plus, sunt mult mai simple decât lupta cu codul CSS.

Găsiți managerul variabil în interfața Divi. Creați o nouă variabilă de număr și dați -i o valoare care se potrivește designului dvs. Utilizați nume clare precum „buton-padding” sau „secțiune-gap” în loc de etichete vagi.

Crearea bibliotecii dvs. variabile

Puteți adăuga variabile comune, cum ar fi:

• „Button-înălțime” la 3rem-scara butoanelor cu dimensiunea textului
• „Secțiune-padding” la 8VH-distanțarea se adaptează la înălțimea ecranului
• „Border-radius” la 0.5rem-colțurile rotunjite rămân proporționale
• „Hero-Height” la 75VH-Secțiunile Hero completează majoritatea ecranelor
• „Fine-Front” la 1px-liniile clare rămân ascuțite
• „Text fluid” la CLAMP (1REM, 2.5VW, 2REM)-Textul scalează fără probleme
• „Lățimea conținutului” la Min (90%, 1200px)-Containerele rămân lizibile
• „Dynamic-Gap” la Calc (2REM + 2VW)-Distanța crește cu dimensiunea ecranului

Aplicați -le în setările dvs. din modul, secțiune sau rând.

Scara variabilelor REM cu dimensiunea textului. Unitățile VH se adaptează la ecrane mai mici. Variabilele cu clemă () se reglează automat între valorile minime și cele maxime.

Construirea presetărilor conectate

După ce ați coafat elementul cu variabile, salvați distanța ca presetare a grupului de opțiuni. Această presetare păstrează acum referințe la variabilele dvs. de număr.

Când aplicați această presetare la alte module, acestea moștenesc aceeași distanță bazată pe variabilă. Actualizați „card-padding” de la 2REM la 3REM în managerul variabil și fiecare element folosind automat actualizările presetate.

Presetarea rămâne aceeași, dar valorile se schimbă. Acest lucru funcționează pentru toate variabilele de design: culori, fonturi, imagini, text și adrese URL. Presetările dvs. devin dinamice în loc de statice, făcând posibile actualizări la nivel de site cu o singură schimbare.

Construiți site -uri web mai bune cu unități CSS și Divi 5

Obținerea unităților CSS Schimbă modul în care construiți site -uri web. Veți repara mai puține machete rupte și veți crea modele care funcționează pe dispozitive. Pixeli cuie detalii precise. Unitățile relative se adaptează la diferite ecrane și preferințe ale utilizatorilor.

Divi 5 face ca clădirea cu unități CSS avansate să fie o adiere. Introduceți orice unitate în constructor și vedeți rezultatele instantaneu. Variabilele de proiectare mențin măsurători în mod consecvent pe site -ul dvs. Schimbați o valoare și totul conectat se actualizează automat.

Site -urile dvs. merită mai bune decât luptele de breakpoint și corecțiile de aspect interminabile. Încercați DIVI 5 și urmăriți unitățile CSS transformați sesiuni de proiectare frustrante în fluxuri de lucru netede.