Înțelegerea unităților CSS (și a modului de utilizare a acestora)

Probabil că ați mai văzut diverse unități CSS în cod web, dar înțelegerea modului în care funcționează vă permite să le utilizați mai intenționat. În această postare, veți afla care sunt cu adevărat unitățile CSS, cum vă afectează machetele și modul în care utilizarea lor în Divi 5 vă ajută să proiectați mai responsabil.

Divi 5 aduce sprijin nativ pentru unitățile CSS chiar în constructor. Datorită funcției de unități avansate, puteți utiliza %, EM, REM, VW și multe altele fără cod personalizat.

Ce sunt unitățile CSS?

Unitățile CSS spun browserului cât de mare sau mic ar trebui să fie ceva. Indiferent dacă setați dimensiunea unei rubrici, lățimea unei secțiuni sau distanța dintre elemente, utilizați unități pentru a defini acel spațiu. Fără ei, browserul nu are idee ce să faci cu valorile tale.

De exemplu, lățimea scrierii: 100 nu înseamnă nimic pentru browser. Dar adăugați o unitate, cum ar fi 100px sau 100%, iar acum știe exact ce doriți.

Luați acest exemplu cu patru cutii, fiecare folosind o valoare CSS diferită:

• Primul folosește lățimea: 100. Invalid din punct de vedere tehnic, dar multe browsere o vor face ca 100%.
• Al doilea (100px) folosește o lățime fixă.
• A treia și a patra (100% și 60%) scară în raport cu containerul părinte.

Vă puteți întreba de ce prima cutie cu lățime: 100 apare încă cu lățime completă, chiar dacă este invalid din punct de vedere tehnic.

Lățime: 100 este ignorat de browser, deoarece îi lipsește o unitate. Dar, în acest caz, cutia încă se întinde pe container, nu pentru că CSS a fost acceptat, ci pentru că elementele la nivel de bloc, cum ar fi Div, în mod natural, acoperă întreaga lățime a părintelui lor în mod implicit. Este o coincidență a comportamentului implicit, nu un rezultat al interpretării CSS nevalide ca 100%.

Unități populare CSS

Deși PX și % apar în mod obișnuit, multe altele sunt la fel de utile odată ce știi când să le folosești:

Veți vedea aceste unități peste tot în designul web, de la setarea dimensiunilor fonturilor, definirea lățimilor secțiunii, reglarea căptușelii și marjele și construirea unor machete flexibile de grilă. Sunt unul dintre cei mai importanți factori hotărâți în modul în care aspectul dvs. arată și se comportă. Și unde utilizați ce unități contează mai mult într -un design eficient, vom ajunge la asta în scurt timp.

Dar, în primul rând, este util să știm că toate unitățile CSS se încadrează în două tipuri principale: absolute și relativă.

Unități absolute și relative

Înțelegerea diferenței este esențială dacă doriți ca aspectul dvs. să funcționeze bine pe diferite dimensiuni ale ecranului.

Unități absolute

Unitățile absolute au valori fixe. Acest lucru înseamnă că atunci când setați ceva la 100px, acesta va fi întotdeauna de 100 de pixeli lățime, indiferent dacă utilizatorul este pe un telefon, o tabletă sau un monitor desktop masiv. Aceste unități nu răspund la dimensiunea ecranului sau la aspectul din jur, ceea ce le face excelente atunci când aveți nevoie de control exact.

Sunt adesea folosite pentru granițe, dimensiuni pictograme sau umbre cu cutie fixă, de obicei acolo unde precizia contează mai mult decât flexibilitatea.

Dar aceeași precizie poate cauza probleme. Un design care arată perfect pe un ecran mare s -ar putea revărsa, se micșora penibil sau se poate rupe în întregime pe dispozitive mai mici. Deoarece unitățile absolute nu se adaptează, acestea vă pot face aspectul să se simtă rigid decât dacă este utilizat cu atenție.

Unități relative

După cum sugerează și numele, acestea se ajustează pe baza împrejurimilor lor. În loc să rămână blocați la o dimensiune specifică, acestea se extind în funcție de context (element părinte, viewport, etc). Acest lucru le face mult mai flexibile pentru proiectarea receptivă.

Unele unități răspund la dimensiunea elementului părinte, altele la dimensiunea fontului rădăcină a paginii, iar altele chiar reacționează la fereastra browserului în sine. Iată câteva cheie:

• % scale cu recipientul părinte.
• EM se ajustează pe baza dimensiunii fontului elementului părinte.
• REM urmează dimensiunea fontului rădăcină a paginii.
• VW și VH răspund la lățimea și înălțimea Viewportului browserului.

Deoarece se adaptează la diferite medii, aceste unități vă ajută să construiți machete care să se simtă natural pe orice ecran. Ele se extind sau se micșorează cu spațiul pe care vi le oferă, ceea ce vă menține conținutul și designul dvs. echilibrat pe dispozitive.

Să ne uităm la un exemplu rapid pentru a vedea de ce contează această flexibilitate. Să presupunem că construiți o secțiune de imagine și setați lățimea la 1200px.

Acest lucru ar putea arăta perfect pe un monitor mare, dar pe o tabletă cu o lățime de ecran de 768 pixeli, imaginea s -ar putea revărsa și arăta ciudat. Acum încercați să utilizați:

width: 100%;

Acest lucru spune browserului să facă ca imaginea să umple lățimea containerului său. Indiferent dacă ecranul este larg sau îngust, imaginea se reglează automat.

Avantajul real al utilizării unei unități relative este receptivitatea. Nu alocați doar o dimensiune, ci oferiți browserului instrucțiuni clare despre modul în care aspectul dvs. ar trebui să se comporte în diferite scenarii. Și când îl înțelegeți corect, conținutul dvs. se potrivește pe fiecare ecran.

Folosind unități relative în care au sens, evitați machete rigide, reduceți nevoia de puncte de întrerupere și păstrați -vă designul mai ușor de gestionat. Și cu Divi, nu trebuie să scrieți o singură linie de cod pentru a utiliza diferite unități CSS. Selectați unitatea dorită în constructor și vedeți aspectul dvs. să răspundă în timp real.

Când să folosiți ce unitate CSS

Acum că înțelegeți diferența dintre unitățile absolute și relative, următorul pas este să știți când să folosiți fiecare.

De regulă, mergeți cu unități relative atunci când aspectul dvs. trebuie să se adapteze la diferite dimensiuni ale ecranului. Acestea sunt perfecte pentru lățimile secțiunii, tipografia, distanțarea dintre elemente sau machete cu pagini complete. Deoarece se extind automat, acestea vă ajută să mențineți consecvența fără a crea stiluri separate pentru fiecare dispozitiv.

Pe de altă parte, unitățile absolute sunt utile atunci când doriți ca ceva să rămână la fel, indiferent de dimensiunea ecranului. Gândiți -vă la margini, pictograme, distanțare fixă sau mici detalii vizuale.

Iată câteva exemple pentru a vă ghida alegerile:

• Utilizați PX atunci când aveți nevoie de control exact, cum ar fi pentru dimensiunile pictogramei. Deoarece nu se adaptează, evitați -l pentru lățimi de dispunere sau text.
• Folosiți % atunci când doriți ca elementele să se extindă cu containerul lor.
• Folosiți -le atunci când doriți distanțare la scară cu dimensiunea fontului elementului părinte.
• Utilizați REM (denumit în mod obișnuit root EM) dacă doriți o dimensiune constantă pe site -ul dvs. Deoarece se bazează pe dimensiunea fontului rădăcină, menține distanțarea și tipografia previzibilă.
• Utilizați VW și VH pentru secțiuni pe ecran complet, zone de erou sau distanțare care răspunde direct la Viewport (întreaga vizualizare a ecranului dispozitivului dvs.).

Pentru un control mai avansat, puteți combina, de asemenea, unități folosind funcții CSS. Calc () este util atunci când amestecați valori precum 1rem + 5VW pentru distanțarea receptivă cu o bază minimă. Și Clamp () este ideal pentru stabilirea valorilor fluide care cresc sau se micșorează între limite, ceea ce îl face o alternativă mai curată la întrebările media.

În final, alegerea unității potrivite implică luarea în considerare a modului în care fiecare element ar trebui să se comporte în diferite scenarii și alegerea unității care realizează cel mai bine acest lucru.

Unitățile avansate ale Divi pentru a construi în mod responsabil fără codificare

Am văzut deja cum unitățile CSS vă oferă controlul asupra comportamentului de aspect. Divi 5 preia acest control și face fără efort utilizarea cu unități avansate.

Abonați -vă la canalul nostru YouTube

Cu suport autohton pentru %, EM, REM, VW și VH încorporat direct în constructor, puteți aplica valori CSS reale la module, secțiuni, distanțare și tipografie, fără a fi nevoie să deschideți un panou de cod. În orice câmp numeric, trebuie doar să selectați unitatea preferată din derularea unității avansate, să reglați valoarea și să vedeți modificările în direct.

Și nu se oprește acolo. Divi vă permite, de asemenea, să utilizați funcții CSS avansate precum Calc () și Clamp () în Visual Builder. Asta înseamnă că puteți crea valori fluide, unități de amestec și machete de reglare fină cu același nivel de dezvoltatori de precizie obținuți de la CS-uri scrise manual, dar vizual.

Aveți nevoie de o dimensiune a fontului care să se scaleze fluid pe diferite dimensiuni ale ecranului? Utilizați clemă (). Doriți să compensați distanța cu un amestec de valori fixe și flexibile? Încercați calc (). Divi gestionează totul, instantaneu și vizibil.

Nu mai ghiciți sau nu mai treceți între design și cod. Divi vă oferă puterea vizuală și feedback -ul instantaneu pentru a obține logica receptivă corectă cu un control complet asupra modului în care elementele dvs. se scala și se comportă pe dispozitive.

Aflați totul despre unitățile avansate ale Divi 5

Unitățile CSS se sincronizează perfect cu fluxurile de lucru avansate ale Divi

Ați văzut deja cum Divi face utilizarea unităților CSS individuale ușor chiar în interiorul constructorului. Dar adevărata forță arată când aceste unități lucrează împreună pe întregul site. Acolo caracteristici precum variabile de design, presetări de grupuri de opțiuni și funcții CSS avansate precum Calc () și Clamp () strălucesc cu adevărat.

Divi nu vă lasă doar să introduceți unitățile CSS în câmpuri. Vă ajută să le integrați în întregul dvs. sistem de proiectare fără a scrie cod. Totul rămâne consecvent, scalabil și mai ușor de întreținut.

Să vedem cum Divi vă ajută să utilizați unitățile CSS ca parte a unui flux de lucru flexibil, bazat pe logică:

1. Creați logica aspectului cu variabile de design

Una dintre cele mai ușoare metode de a economisi timp pentru orice proiect este să vă planificați logica de aspect în avans. În loc să ajustați aceeași distanță sau dimensiunea fontului în mai multe locuri, definiți aceste valori o dată și le reutilizați pe întregul dvs. design, cu variabilele de design ale Divi.

Puteți crea valori reutilizabile precum –card-padding sau –Section-gap, folosind unități CSS reale precum 2rem, 5VW sau chiar formule precum Calc (2REM + 1VW). Odată setate, aceste valori pot fi aplicate pe module, rânduri și secțiuni pentru a menține totul consecvent.

Trebuie să actualizați variabila doar dacă doriți să o schimbați mai târziu. Schimbarea se reflectă oriunde este folosită, economisindu-vă înapoi și înapoi pentru a vâna setările individuale. Și pentru că unitățile CSS sunt construite chiar în sistemul Divi, nu te bazezi pe ghiciri, ci aplicând vizual o logică reală a CSS. Acest lucru face ca aspectul dvs. să fie mai ușor de gestionat, scalabil și mai ușor de ajustat pe măsură ce proiectul dvs. crește.

2. Utilizați vizual Clamp () și Calc ()

Funcțiile CSS precum Clamp () și Calc () vă ajută să construiți machete receptive. Acestea vă permit să definiți valori flexibile care se ajustează pe dimensiunile ecranului fără a scrie interogări media. Așadar, în loc să setați dimensiuni fixe pentru fiecare dispozitiv, puteți scrie o logică precum Clamp (1rem, 2VW, 2.5rem) pentru a permite browser -ului să scaleze lucrurile fără probleme între limitele de setare. Sau utilizați Calc (100Vh - 80px) pentru a regla o secțiune Hero pe baza înălțimii dvs. de vizionare.

În mod normal, necesită scrierea CSS manual. În Divi, le puteți introduce direct în orice câmp de număr.

Și pentru că unitățile CSS sunt acceptate în ambele funcții, puteți amesteca valori precum REM, VW și PX pentru a obține exact comportamentul pe care îl doriți. Vedeți rezultatele în direct așa cum tastați, ceea ce face ușor să experimentați și să obțineți capacitatea de reacție, fără a părăsi constructorul.

3. Salvați logica unității cu presetări de grupuri de opțiuni

După ce ați configurat machete folosind unități sau formule avansate, nu trebuie să le reconstruiți din nou. Divi vă permite să vă salvați logica de stil, inclusiv lucruri precum Padding: Clamp (1rem, 3VW, 2rem), ca presetare a grupului de opțiuni.

Asta înseamnă că data viitoare când aveți nevoie de același model de distanțare sau aspect, nu aplicați aceleași setări, ci doar presetarea salvată.

Și dacă utilizați variabile de design în presetări, este și mai bine. Puteți crea cu ușurință un sistem interconectat în care modificarea stilurilor întregului site web depinde de un singur lucru: schimbarea variabilei.

În Divi, utilizarea unei unități CSS nu este doar dimensiunea; Este vorba despre comportament. Fiecare valoare pe care o setați devine parte a unui sistem vizual care se adaptează, scalează și rămâne consecvent în aspectul dvs. Și pentru că totul este încorporat în constructor, se simte mai puțin ca codificarea și mai mult ca proiectarea cu logică.

Divi transformă unitățile CSS într -o superputere vizuală

Nu trebuie să scrieți CSS pentru a utiliza unitățile CSS. Divi 5 le aduce pe toate într -o interfață vizuală în care puteți explora, aplica și previzualiza în timp real. Indiferent dacă ajustați distanțarea, construiți tipografia fluidelor sau creați logică de aspect cu variabile și presetări, Divi vă permite să faceți totul vizual.

Sunteți gata să îl încercați? Descărcați Divi 5 și începeți să utilizați unități CSS reale în desenele dvs.