Utilizarea min () și max () în divI 5 pentru a crea machete inteligente

CSS Min () și Max () sunt două funcții versatile, dar subutilizate, în proiectarea web responsivă, iar Divi 5 are sprijin complet pentru ambele de la actualizarea unităților avansate. În timp ce am explorat anterior tipografia fluidului cu CLAMP () și calcule dinamice cu Calc (), Min () și Max () vă oferă modalități și mai simple de a realiza un design receptiv.

În această postare, vă vom arăta cum să utilizați aceste funcții folosind DIVI (Divi 5 este gata pentru dvs. să utilizați pe site -uri noi, cu o recomandare pentru migrație pentru site -urile existente în curând). Orice puteți face pentru a utiliza funcții receptive vă va reduce dependența de întrebările media, CSS este un lucru frumos!

CSS Min () și Max (): machete mai inteligente cu o logică mai simplă

Dacă ați explorat deja Clamp (), sunteți la jumătatea drumului la Mastering Min () și Max ()! Dacă vă amintiți, Clamp () folosește trei valori simultan (Min, Preferred și Max), Min și Max în Clamp () este același concept, dar cu doar 1/3 din logică la un moment dat.

Ce fac min () și max ()?

Funcțiile min () și max () vă permit să setați două sau mai multe valori, cu cea mai mică (min) sau cea mai mare (max) afișată pe baza dimensiunii ecranului.

„Punctul de tranziție” este determinat respectiv la cele două valori pe care le setați, deci acest lucru este doar în scopuri de vizualizare

min (): alege întotdeauna valoarea mai mică

Utilizați min () pentru a împiedica ecranele largi să întindă conținutul excesiv. Acest lucru este ideal pentru machete care nu ar trebui să crească prea larg pe ecrane mari, dar ar trebui să aibă multă flexibilitate pentru a se extinde în jos, pe măsură ce dimensiunile ecranului devin mai mici.

 width: min(100%, 500px); 

În acest exemplu, lățimea elementului nu va depăși niciodată 500px, dar va fi 100% dacă se află sub această marcă de 500px.

max (): alege întotdeauna valoarea mai mare

Utilizați max () pentru a împiedica conținutul să devină prea îngust sau mic, în special pe ecrane mai mici sau când conținutul are nevoie de o dimensiune minimă pentru a rămâne lizibil sau funcțional. Acest lucru este ideal pentru machete care nu ar trebui să se micșoreze dincolo de un anumit punct pe ecrane mici (o valoare fixă), dar se pot extinde pentru a găzdui spații mai mari (cu o valoare relativă).

 width: max(80%, 300px); 

În acest exemplu, lățimea elementului va fi întotdeauna opțiunea mai mare: 80% din containerul său sau 300px. Pe ecrane mai mici sau în containere strânse, dacă 80% calculează la mai puțin de 300px, elementul va fi în continuare de cel puțin 300px lățime. Pe ecrane mai mari, elementul se va extinde la 80% din lățimea containerului, dar nu se va micsora niciodată sub 300px. Această abordare ajută la asigurarea că elementul rămâne utilizabil pe ecrane mici, în timp ce se scalează în mod responsabil pe cele mai mari.

De ce să combinați valorile relative și fixe în min () și max ()?

Când întâlnești prima dată min () sau max () în CSS, s -ar putea să vă întrebați de ce ele combină adesea valori precum un procent și un pixel. Acest lucru se datorează faptului că fiecare tip de unitate joacă un rol diferit în proiectarea receptivă.

De exemplu, Min (100px, 200px) se va rezolva întotdeauna la 100px. Doar alege cea mai mică dintre două valori fixe. Dar când amestecați unități, cum ar fi min (100%, 500px), spuneți browserului: „Utilizați care este mai mic între 100% din lățimea părintelui și 500px.” Acest lucru îl face receptiv.

Unități relative precum %, VW și EM se ajustează în funcție de context - indiferent dacă acesta este elementul părinte, vizionarea sau dimensiunile moștenite ale fontului. Unități fixe precum PX rămân constante în CSS, ceea ce le face previzibile.

Combinând valorile fixe și relative, Min () și Max () vă permit să construiți modele flexibile care se adaptează în timp ce aplică încă limitele de dimensiune.

Cum se folosește min () și max () cu divi

Acum că am acoperit elementele de bază ale Min () și Max (), să discutăm câteva exemple.

1.. Lățimi de rând receptive cu mai puține câmpuri

Întotdeauna ați reușit să setați o lățime și o lățime maximă pe elementele de containere cu Divi. Dar prin deschiderea funcțiilor CSS precum Min () și Max () puteți face același lucru, dar utilizați un câmp de design mai puțin (și ieșiți puțin mai puțin CSS pe pagina dvs.).

În Divi, dacă mergeți la un element (în cazul nostru, un rând), fila Design și apoi la dimensionare , veți găsi câteva opțiuni pentru ajustarea lățimii. Realizând lățimea 95% și setarea lățimii maxime la 900px, aveți ceva care arată bine pe dispozitivele mobile, dar vă oferă și un aspect cu mult spațiu negativ pe stânga și spre dreapta pentru afișaje pentru desktop.

Acest lucru este ca și cum ai folosi CSS ca acesta pentru rânduri:

 .container {
width: 95%;
max-width: 900px;
} 

Cu unitățile avansate ale Divi 5, acum aveți o altă opțiune mai consolidată. Puteți introduce tot ce aveți nevoie doar în câmpul de lățime și puteți obține același rezultat.

Acest lucru este ca și cum ai folosi acest CSS pe recipientul rând:

 .container {
width: min(95%, 900px);
} 

Este o linie de CSS față de două linii. Mai important, necesită un pas și o valoare mai puțin de fiecare dată când utilizați min () în loc să setați atât o lățime, cât și o lățime maximă. Oricare dintre opțiuni obține același rezultat așa cum s -a demonstrat în acest videoclip:

Acest caz de utilizare particular nu este atât de interesant, dar arată puterea de min () și max () și cum poate înlocui declarațiile CSS mai vechi.

Când utilizați min () sau max () pentru distanțare, dimensionare sau granițe (pot fi utilizate pe mai multe câmpuri din Divi 5), vă recomand cu tărie să le setați în presetări de grupuri de opțiuni sau presetări de elemente. În acest fel, puteți obține o scalare constantă, indiferent de locul în care le utilizați.

2..

Mai jos, am un design care garantează mai mult căptușeala interioară și o lățime mai mare de frontieră, deoarece dimensiunile ecranului devin mai mari. Pentru a găzdui acest lucru, am folosit funcția maximă () pentru a seta lățimea de margine dreapta/stânga/superioară/inferioară și căptușeala la rând. CSS ar fi ceva de genul acesta:

 .container {
padding: max(10px, 2vw) max(10px, 2vw) max(10px, 2vw) max(10px, 2vw);
border-width: max(5px, 1vw) max(5px, 1vw) max(5px, 1vw) max(5px, 1vw);
} 

Aceasta înseamnă că funcția maximă () va alege care este mai mare în orice situație la care se aplică. Cea mai mică căptușeală din fiecare parte este de 10px, iar cea mai mare este de 2VW. În mod similar, pentru lățimea frontierei, cel mai mic va fi vreodată este de 5px, iar cel mai mare este 1VW).

Iată cum arată max () în această situație în design> distanțare> căptușeală pe rând în divi:

Iată cum arată Max () în această situație în proiectare> Border>Lățimea frontiereipe rândul din Divi:

Împreună, obțin efectul de a avea mai puțin căptușeala pe interiorul rândului și o lățime mai subțire a graniței pe ecrane mai mici. Dar crește pe măsură ce dimensiunile ecranului devin mai mari, iar valoarea VW (amintiți -vă, este o valoare relativă) devine mai mare decât valoarea pixelului fix.

Acest lucru ajută la maximizarea disponibilității ecranelor mai mici, în timp ce ecranele mai largi pot umple mai mult spațiul.

3. Secțiuni de erou cu înălțime completă

Folosind valoarea min () pe înălțimea unei secțiuni, puteți crea o secțiune Hero care este cel puțin o anumită înălțime, dar altfel se potrivește cu 90% din înălțimea pe ecran complet (și nu mai mult) folosind o funcție simplă Min ().

 height: min(800px, 90vh) 

Aceasta are efectul de a avea o secțiune Hero cu înălțime completă, cu excepția ecranelor mai mari (mai înalte), care ar arăta apoi următoarea secțiune de sub ea. În setările de dimensionare divi, acest lucru se poate face cu două intrări diferite de câmp (lățime și lățime maximă), dar folosind funcția min (), putem obține același efect folosind un singur câmp în dimensionare.

Menține secțiunea Hero ca principalul lucru pentru majoritatea dimensiunilor ecranului, dar nu devine prea mare în puținele cazuri cu rezoluții mai înalte.

4. Dimensiunea fontului

Utilizarea Min sau Max pentru dimensiuni de fonturi vă poate ajuta să obțineți o dimensiune mai dinamică decât valorile pixelului static. Pentru aceasta, ați dori să utilizați Max () pentru a extinde dimensiunea fontului pe baza condițiilor de dimensiune a ecranului. Setați valoarea Pixel/REM la dimensiunea absolută mică pe care doriți să o utilizați și utilizați o valoare relativă pentru a se extinde în sus.

1rem este egală cu dimensiunea fontului rădăcină (de obicei 16px, cu excepția cazului în care este personalizat în stilurile site -ului dvs.); O dimensiune a fontului de Max (1rem, 2VW) ar lua cea mai mare dintre cele două valori și nu ar fi niciodată mai mică de 16px.

După cum puteți vedea, pe cele mai mici dispozitive, dimensiunea fontului este setată la 1rem/16px. La un moment dat, valoarea mai mare devine 2VW și scalează dimensiunea fontului în sus, ceea ce face ca fontul să fie mai mare pe măsură ce dimensiunile ecranului devine mai mare.

Pentru dimensionarea fonturilor, nu recomand să folosiți Min sau Max, ci în schimb Clamp (). Min/Max vă oferă doar o scalare dinamică într -o singură direcție și pentru a vă apropia de efectul Clamp (), ar trebui să vă setați regulile de dimensionare a fonturilor min/max la mai multe puncte de întrerupere (ceea ce este posibil, dar mult mai ușor să utilizați pur și simplu CLAMP).

Diferența dintre min ()/max () și clemă ()

Puteți înțelege Clamp () ca o combinație de min () și max () cu o valoare preferată între ele. Clamp () ia o valoare pentru capacul minim, o valoare ca capac maxim și o a treia valoare (la mijloc) ca valoare preferată care determină panta de schimbare între min și max.

Un exemplu:

 font-size: clamp(16px, 4vw, 40px); 

Aceasta înseamnă că dimensiunea fontului pe care o setați nu va fi niciodată mai mică de 16px sau mai mare de 40px. Cu toate acestea, rata pe care o modifică (pe baza dimensiunii ecranului) este determinată de valoarea preferată din centru.

Citiți articolul meu dedicat despre utilizarea CLAMP () pentru a vedea generatorul meu de tipografie de fluide preferate care vă creează funcțiile de clemă () pentru dvs.

Încercați min () și max () cu Divi 5

Min () și max () s -ar putea să nu obțină la fel de multă atenție ca Clamp () sau Calc (), dar sunt instrumente esențiale pentru modele mai inteligente, mai simple și mai curate în Divi 5.

Aceste funcții CSS vă oferă modalități unice de a controla receptivitatea site -ului dvs. web. După ce înțelegeți când să utilizați min () și max (), vă veți întreba cum ați gestionat designul receptiv fără ei. Sunt pe deplin susținute pe browserele moderne, iar Divi face ca implementarea lor să fie simplă. Divi 5 este gata să fie utilizat pe site -uri web noi.