Ce este Clamp () în CSS (și cum să -l folosești)

Dacă ați încercat vreodată să faceți ca site -ul dvs. să arate bine atât pe telefoane, cât și pe monitoare uriașe, ați văzut cum se rupe distanță, fonturile se micșorează drastic sau se scala excesiv, iar elementele fie copleșite sau dispar. Pentru a remedia toate acestea, ajungeți să scrieți o listă lungă de interogări media pentru un aspect. Acolo poate ajuta clema ().

Este o funcție CSS care simplifică setarea dimensiunilor. În loc să definiți mai multe valori la punctele de întrerupere fixe, vă permite să setați un minim, un preferat și un maxim, astfel încât elementele dvs. să se extindă fluid pe măsură ce ecranul se modifică. Partea cea mai bună este că acestea rămân în limitele dvs. definite, astfel încât nu există neconcordanțe de aspect.

În această postare, vom explica cum funcționează Clamp (), de ce poate fi adesea mai eficient decât întrebările media și cum Divi 5 vă permite să îl utilizați fără să scrieți o singură linie de cod!

Ce este clema ()

Clamp () este o funcție nativă în CSS, folosită pentru a defini valorile receptive care se ajustează pe baza dimensiunii ecranului. În loc să codificați un singur număr, oferiți browserului un interval cu care să funcționați - setați o valoare minimă, o valoare preferată scalabilă și o valoare maximă. Acestea fac aspectul dvs. mai flexibil și nu trebuie să scrieți mai multe interogări media pentru fiecare dimensiune a ecranului.

Să înțelegem acest lucru cu un exemplu de dimensiune a fontului fluid care crește/scade în funcție de dimensiunea ecranului.

font-size: clamp(40px, 7vw, 100px);

Aici, dimensiunea fontului nu va fi niciodată sub 40px, scară bazată pe 7% din lățimea Viewport și nu va înceta să crească odată ce va ajunge la 100px.

Un alt mare beneficiu al utilizării Clamp () este faptul că, spre deosebire de întrebările media, evită salturile rigide și îți menține stilurile mai previzibile și mai citibile.

Ce ne referim la asta? Să înțelegem acest lucru comparând Clamp () cu interogări media.

Compararea interogărilor de clemă () și media

Interogările media sunt un alt mod obișnuit de a ajusta dimensiunile fontului pentru diferite lățimi ale ecranului. Aici, definiți punctele de întrerupere la lățimile specifice ale ecranului în care se schimbă stilurile. De exemplu, puteți atribui o dimensiune a fontului pentru desktop, alta pentru tabletă și o treime pentru mobil, astfel încât dimensiunea fontului se schimbă doar atunci când lățimea ecranului atinge fiecare punct de întrerupere.

Această metodă funcționează, dar nu este fluidă. Între 1000px și 501px, dimensiunea fontului rămâne blocată la 100px. În momentul în care ecranul ajunge la 500px, fontul scade brusc la 30px. Aceasta înseamnă nicio tranziție lină, doar o schimbare accentuată.

Așadar, dacă doriți să faceți scalarea să se simtă mai naturală, trebuie să adăugați mai multe puncte de întrerupere și să reglați manual dimensiunea fontului la fiecare. Asta ar face codul dvs. lung și umflat.

În schimb, Clamp () vă salvează de tranziții abrupte și cod lung. De fapt, poate fi scris într-o singură linie: size font: clemă (30px, 7VW, 100px).

Acest lucru spune browserului să scaleze fontul între 30px și 100px pe baza a 7 la sută din lățimea vizualizării. Mărimea fontului se ajustează fluid pe toate dimensiunile ecranului, fără salturi abrupte sau necesitatea mai multor puncte de întrerupere. Încă definiți limitele, dar scalarea între ele este automată și mai consistentă.

În acțiune live, iată cum arată o comparație între redimensionarea fontului de breakpoint -uri de interogare media și Clamp ():

Pentru redimensionarea receptivă, Clamp () face o diferență vizibilă. În loc să aștepte lățimile ecranului fix pentru a declanșa modificări ale stilului, acesta răspunde la fiecare pixel între ele. Acest lucru menține codul dvs. mai curat și designul dvs. mai consistent pe toate dispozitivele. În plus, este susținut pe scară largă de majoritatea browserelor moderne, ceea ce înseamnă că va face bine aceste browsere , ceea ce îl face un înlocuitor de încredere și practic.

Cum funcționează Clamp () în culise

Clamp () ia trei valori care lucrează împreună pentru a extinde orice proprietate CSS:

 clamp(minimum, preferred, maximum) 

Fiecare parte a funcției are un rol specific:

• Valoare minimă: cea mai mică valoare posibilă. Elementul nu se va scala sub acest punct, oricât de mic este ecranul.
• Valoarea preferată: această valoare scalează pe baza dimensiunii ecranului. De obicei, este setat folosind unități relative precum VW sau o expresie Calc () pentru a permite fluiditatea liberă.
• Valoare maximă: cea mai mare dimensiune permisă. Chiar și pe ecrane foarte mari, elementul nu va depăși această valoare.

Când browserul calculează dimensiunea finală, acesta evaluează mai întâi valoarea preferată. Browserul folosește minimul dacă dimensiunea ecranului este suficient de mică încât valoarea preferată scade sub minim. În mod similar, dacă ecranul este suficient de larg încât valoarea preferată depășește maximul, se lipește cu asta.

Acest lucru face ca comportamentul să fie previzibil. Știți întotdeauna că designul dvs. va rămâne în intervalul definit, dar veți obține o scalare flexibilă între aceste limite. Prin stabilirea limitelor minime și maxime, Clamp () vă asigură că elementele dvs. sunt la scară fluidă, dar niciodată prea mult. Destul.

Alegerea valorii preferate corecte

Poate ați observat că valoarea preferată (cea de mijloc) joacă un rol mai mare în toate acestea. Decide cum se scalează elementele.

În primul rând, nu ar trebui să fie o valoare fixă ​​precum CLAMP (40px, 80px , 120px), deoarece în acest caz, valoarea preferată nu se extinde deloc. Deoarece 80px se încadrează deja între limită, browserul îl blochează și ignoră modificările de dimensiune a ecranului. Aceasta duce la o valoare statică, care învinge scopul utilizării Clamp () în primul rând.

În schimb, valoarea preferată ar trebui să fie întotdeauna relativă , ca în clemă (40px, 7VW , 120px). Aici, 7VW răspunde la lățimea Viewport, care permite elementului să se extindă fără probleme pe dimensiunile ecranului. Funcția de prindere se asigură apoi că nu coboară niciodată sub 40px sau peste 120px, păstrând dimensiunea receptivă la 7% din lățimea ecranului.

De asemenea, trebuie să luați în considerare dimensiunea valorii relative. De exemplu, o valoare mai mică, cum ar fi 2VW , scalează elementul mai treptat pe dimensiunile ecranului, în timp ce o valoare mai mare precum 6VW provoacă o scalare mai rapidă și atinge dimensiunea maximă mai devreme. Pentru a identifica ce scalări funcționează pentru dvs., încercați calculatorul de scară de tip fluid. Vă permite să previzualizați diferite valori și să exportați CSS gata de utilizare.

Notă: Calculatorul de scala de tip fluid iese valorile VI. Dacă utilizați ieșirea generată în DIVI, asigurați -vă că schimbați unitățile VI în VW.

Diferite tipuri de unități în clemă ()

Unitățile din interiorul clemei () afectează modul în care se comportă pe dispozitive. Iată tot ce puteți utiliza:

În cele mai multe cazuri, dezvoltatorii folosesc PX pentru valorile minime și maxime și o unitate fluidă precum VW pentru valoarea preferată. Acest lucru oferă cel mai bun echilibru între control și reacție.

Cu toate acestea, puteți utiliza, de asemenea, unități relative pentru valori min și maxare, cum ar fi CLAMP (2REM, 4REM, 8REM). Acest lucru face ca designul dvs. să fie mai accesibil și mai ușor de extins dacă dimensiunea fontului rădăcină se schimbă. Este util în special pentru utilizatorii care ajustează setările browserului pentru lizibilitate.

CLAMP () în Divi 5

Funcția Clamp () în CSS este incredibil de utilă, dar numai dacă sunteți confortabil cod de scriere. Ce zici de cei care preferă să -și construiască site -urile web vizual fără a atinge o foaie de stil? Doriți să construiți machete de lichide folosind Clamp (), dar fără a scrie cod?

Dacă da, unitățile avansate ale Divi 5 vă pot ajuta.

Abonați -vă la canalul nostru YouTube

Povestea scurtă, Divi 5 acceptă Clamp () ca o unitate avansată în întregul constructor și este foarte ușor să le accesați. Oriunde puteți introduce o valoare numerică, cum ar fi dimensiunea fontului, distanțarea sau lățimea secțiunii, veți găsi opțiunea de a utiliza direct Clamp ().

Doar faceți clic pe câmpul de intrare pentru a selecta dintre diferitele unități avansate disponibile în Divi 5 (consultați lista de culoare închisă de lângă dimensiunea textului de rubrică) , schimbați tipul de unitate și definiți valorile minime, preferate și maxime.

Și asta este! Fără codificare sau CSS deloc - tot ce ai făcut a fost să introduceți o valoare de clemă (), iar rubrica dvs. a devenit fluidă la fel.

Divi 5 face ușor crearea de modele fluide, receptive, fără a scrie CSS personalizate. Obțineți toată flexibilitatea unei cleme () cu simplitatea unui editor vizual. (Divi 5 acceptă multe alte unități avansate, inclusiv clemă ()).

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

Cum se folosește Clamp () în Divi 5?

Până acum, ați văzut cât de ușor este să folosiți Clamp () în Divi 5. Selectați pur și simplu unitatea Clamp () și adăugați valorile preferate. Fără cod personalizat, fără fișiere CSS, doar o interfață vizuală curată.

Dar ceea ce face Clamp () cu adevărat puternic în Divi nu este doar funcția în sine. Este cu ce funcționează.

Divi 5 este construit în jurul unui sistem de proiectare modular. Acest lucru înseamnă că puteți combina Clamp () cu alte caracteristici avansate, cum ar fi variabile de proiectare și funcții CSS precum Calc () pentru a face aspectul dvs. nu numai că este receptiv, ci și consistent și ușor de scalat. Și de acolo devine interesant - Divi 5 face ușor să se încadreze Clemp () în fluxul de lucru.

Clamp () funcționează cu variabile de design

Cel mai bun mod, cel mai eficient mod de a utiliza eficient Clamp () în Divi 5 este să îl combinați cu variabile de proiectare.

Variabilele de proiectare vă permit să definiți valori globale (cum ar fi tipografia, culorile și chiar dimensiunile fontului), astfel încât să le puteți folosi pe întregul site pentru a -l menține consecvent. De asemenea, puteți salva valorile CLAMP () ca variabile de număr. Acest lucru vă permite să salvați valori globale receptive, astfel încât atunci când le schimbați, toate instanțele sunt actualizate simultan.

De exemplu, definiți dimensiunile CLAMP () pentru titluri H1-H6 de genul acesta:

Și salvați -le în interiorul managerului variabil în Divi Builder:

Apoi, toate rubricile de pe site -ul web se vor adapta pe baza valorilor dvs. de clemă () definite.

Acum, dacă doriți să actualizați dimensiunea H3, trebuie doar să modificați variabila numărului său și va fi actualizată oriunde ați folosit -o. ( Doriți să vă creați propriul sistem de tipografie în Divi 5? Iată un ghid complet privind gestionarea fonturilor și a dimensiunilor de fonturi folosind variabilele Clamp () și Design.)

Această abordare permite un control centralizat, ceea ce face ușor actualizarea setărilor tipografice la nivel global, fără a regla manual fiecare instanță. Prin aplicarea acestor variabile de clemă () prin presetări de grupuri de opțiuni, eficientizați procesul de proiectare.

CLAMP () se combină cu Calc ()

Puteți utiliza, de asemenea, funcția Calc () din Clamp () pentru a regla bine modul în care valorile dvs. se scala. Acest lucru este util mai ales atunci când doriți să adăugați o dimensiune de bază și apoi să o scalați mai precis cu o unitate relativă precum VW.

De exemplu, dimensiunea fontului: CLAMP (1REM, CALC (0,75REM + 2VW), 2.5REM) folosește Calc () pentru a adăuga o bază stabilă (0,75rem) și apoi o scară mai departe cu 2VW.

Acest lucru permite fontului să se scaleze pe baza lățimii Viewport, dar îi oferă și un început de cap cu o dimensiune a fontului de bază. Acest lucru este util pentru menținerea lizibilității pe ecrane mai mici, fără a avea nevoie de mai multe variații de clemă. Calc () Trick Inside Clamp () este perfect pentru oriunde doriți controlul suplimentar asupra modului de scară a lucrurilor.

Cazuri de utilizare practică de clemă ()

Acum să ne uităm la unele cazuri de utilizare obișnuită de clemă () și cât de ușor devine atunci când îl aplicați cu Divi 5:

1.. Dimensiuni constante de rubrică pe toate dispozitivele

Tipografia receptivă este cel mai bun caz de utilizare a clemei (). Întrucât ne-am definit deja dimensiunile de rubrică (H1-H6) folosind Clamp () în variabile de proiectare, este timpul să le vedem în acțiune.

Am creat această pagină folosind H5S pentru elemente de meniu. Apoi, am aplicat variabila numărului H5 la fiecare dintre dimensiunile textului H5. Și după cum puteți vedea, fiecare se îndreaptă fluid pe punctele de întrerupere.

Textul rămâne clar, echilibrat și consistent vizual în toate punctele noastre de întrerupere definite.

Puteți utiliza, de asemenea, Clamp () pentru înălțimea liniei și distanțarea literelor. Ajută la menținerea lizibilității optime prin creșterea ușoară a lacunelor de linie sau distanțarea pe măsură ce ecranul devine mai larg. O mică schimbare, dar ar face conținutul de formă lungă să se simtă mai respirabil.

2. Setați lățimea clampului () pentru secțiunile de paragrafe pe ecrane mari

Paragrafele sunt în mod natural ușor de citit pe mobil, deoarece liniile scurte din ecranele compacte fac conținutul digerabil. Cu toate acestea, pe monitoare ultra-larg, cititorii vor fi obligați să scaneze rânduri orizontale întregi dacă o secțiune cu lățime completă se întinde prea departe. Se simte ca să citești un panou publicitar. Lungimea ideală a liniei unei propoziții este de aproximativ 50-75 de caractere, așa că dacă site -ul dvs. web afișează o propoziție nesfârșită pe un ecran larg, puteți pierde interesul cititorului.

Pentru a remedia acest lucru, setați o lățime receptivă, cum ar fi CLAMP (300px, 65VW, 800px) pentru a scala alineatul la o lățime fixă ​​(800px), astfel încât paragrafele apar citibile chiar și pe ecrane mai largi.

Acesta este un mod perfect de a face postările dvs. de pe blog lizibile pe ecrane mai largi.

3. Setați lățimea clemei () pentru imagini unice sau prezentate

În mod similar, imaginile unice (cum ar fi imaginile prezentate) pot apărea mult prea mari pe ecrane ultra-lățime. Arată perfect pe o tabletă, dar se poate întinde penibil pe un monitor 4K, care se poate simți copleșitor în comparație cu restul conținutului.

Pentru a remedia acest lucru, utilizați o lățime de imagine bazată pe clemă, cum ar fi clema (300px, 60VW, 1000px). Se asigură că imaginea crește fluid cu dimensiunea ecranului, dar se oprește înainte de a domina aspectul.

Sau, altfel, puteți seta doar o lățime de clemă () pentru întregul rând de container pentru a asigura scara tuturor elementelor (imagine, titlu și text) în mod uniform.

4. Adăugați căptușeala și marja fluidă cu clemă ()

Designerii obțin adesea distanțarea potrivită pentru desktop, dar nu funcționează întotdeauna bine pe ecrane mai mici sau foarte mari. Padding -ul fix și marjele nu se reglează întotdeauna cu dimensiunea ecranului. Acolo Clamp () devine util.

De exemplu, o marjă de clemă (0,5rem, 2VW, 2rem) și o clemă (1rem, 3VW, 4rem) Padding într -o galerie de imagini creează spații care încep mici și la scară cu ecranul.

Oferă camera de aspect pentru a respira pe ecrane mari și păstrează lucrurile strânse pe mobil:

Clamp () ajută, de asemenea, să se scaleze fără probleme în jurul aspectului cardului, galerii de imagini, containerelor de secțiune și blocurilor de text, mai ales atunci când doriți distanțare intenționată, fără o modificare constantă a punctului de întrerupere.

5. Creați secțiuni de eroi receptive care se extind perfect

Folosind Clamp (), puteți face ca secțiunile Hero să pară perfecte pe fiecare ecran, definind titlul Hero, căptușeala cu buton și distanțarea subtitrării. Am salvat aceste valori de clemă () ca variabile de proiectare pentru a simplifica aplicația lor. (Dar nu ați dori să vă completați managerul variabil salvând fiecare detaliu.)

Aplicarea acestor valori este acum ușoară.

Odată salvat, fiecare se va adapta automat la dimensiunea ecranului pentru a oferi secțiunii tale erou prima impresie perfectă pe fiecare dispozitiv.

Proiectați machete perfecte de pixeli folosind Clamp (), fără a scrie o singură linie de cod

Clamp () vă ajută să proiectați machete fluide, receptive, fără a vă baza pe interogări media interminabile. Și cu Divi 5, nu trebuie să scrieți o singură linie de cod pentru a o utiliza. Indiferent dacă preferați codificarea sau vă bucurați de design vizual, unitățile avansate ale Divi fac mai ușor aplicarea clemei () pe fonturi și distanțarea.

Cu funcții puternice precum Clamp () atât de ușor accesibile, nu ați dori să încercați Divi 5 pentru dvs.? Testați diferite valori, creați -vă propriul sistem receptiv și vedeți cât de flexibil pot deveni machetele dvs. Și când aveți un truc de clemă () preferat, împărtășiți -l în comentariile de mai jos! Ne -ar plăcea să vedem ce creezi.