Share
Am creat un ghid complet care să vă ajute să învățați CSS, indiferent dacă începeți doar cu elementele de bază sau doriți să explorați CSS mai avansat.
Este ușor să ne lipiți de lucrul cu tehnicile CSS pe care le cunoaștem bine, dar acest lucru ne pune într-un dezavantaj atunci când noi probleme de suprafață.
Pe măsură ce webul continuă să crească, cererea de soluții noi va continua să crească. Prin urmare, ca designeri web și dezvoltatori de front-end, nu avem de ales decât să cunoaștem setul nostru de instrumente și să-l cunoaștem bine.
Asta inseamna sa stii chiar si instrumentele de specialitate - cele care nu sunt folosite atat de des, dar cand sunt necesare, sunt exact instrumentul potrivit pentru job.
Astăzi, vă voi prezenta câteva instrumente CSS despre care nu ați știut anterior. Aceste unelte sunt fiecare unitate de măsură, cum ar fi pixeli sau ems, dar este foarte posibil să nu fiți auzit de ei! Hai să ne aruncăm.
Vom începe cu ceva asemănător cu ceva despre care probabil sunteți deja familiarizat. em unitatea este definită ca curent marimea fontului. De exemplu, dacă setați o dimensiune a fontului pe elementul corpului, em valoarea oricărui element copil din corp va fi egală cu dimensiunea fontului.
Test
corp font-size: 14px; div font-size: 1.2; // calculat la 14px * 1.2, sau 16.8px
Aici, am spus că div va avea a marimea fontului de 1.2em. Este de 1,2 ori mai mare decât dimensiunea fontului pe care a mostenit-o, în acest caz 14 pixeli. Rezultatul este 16.8px.
Cu toate acestea, ce se întâmplă atunci când faceți cascadă dimensiunilor de fonturi em definite în interiorul celuilalt? În următorul fragment, aplicăm exact același CSS ca mai sus. Fiecare div moștenește dimensiunea fontului de la părintele său, oferindu-ne o creștere treptată a dimensiunilor fontului.
TestTestTest
Deși acest lucru poate fi dorit în unele cazuri, de multe ori ați putea dori pur și simplu să vă bazați pe o singură măsură pentru a reduce împotriva. În acest caz, ar trebui să utilizați rem. "R" în rem înseamnă "rădăcină"; aceasta este egală cu dimensiunea fontului setată la elementul rădăcină; în majoritatea cazurilor fiind faptul că este html element.
html font-size: 14px; div font-size: 1.2rem;
În toate cele trei divs imbricate din exemplul precedent, fontul va evalua la 16.8px.
Remisurile nu sunt utile doar pentru dimensionarea fonturilor. De exemplu, ați putea baza un întreg sistem de grilă sau bibliotecă de stil UI pe dimensiunea fontului de bază HTML folosind rem, și utilizează scalarea em în locuri specifice. Acest lucru vă va oferi o dimensiune și o scalare mai predictibilă a fontului.
.container lățime: 70rem; // 70 * 14px = 980px
Conceptual, ideea din spatele unei astfel de strategii este de a permite interfeței dvs. să scadă cu dimensiunea conținutului dvs. Cu toate acestea, este posibil ca acest lucru să nu aibă în mod necesar cel mai mare sens pentru fiecare caz.
Caracteristică: unitățile rem (root em) de pe caniuse.com
Tehnicile responsabile de web design se bazează în mare măsură pe regulile procentuale. Cu toate acestea, procentajul CSS nu este întotdeauna cea mai bună soluție pentru fiecare problemă. Lățimea CSS este relativă la cel mai apropiat element parental. Dacă doriți să utilizați lățimea sau înălțimea ferestrei de vizualizare în locul lățimii elementului părinte? Exact asta este vh și vw unități.
vh element este egal cu 1/100 din înălțimea ferestrei de vizualizare. De exemplu, dacă înălțimea browserului este 900px, 1vh ar evalua la 9px. În mod similar, dacă lățimea ferestrei de vedere este 750px, 1vw ar evalua la 7.5px.
Există utilizări aparent fără sfârșit pentru aceste reguli. De exemplu, o modalitate foarte simplă de a realiza diapozitive cu înălțime completă sau de înălțime completă poate fi realizată cu o singură linie de CSS:
.slide height: 100vh;
Imaginați-vă că doriți un titlu care a fost setat să umple lăţime a ecranului. Pentru a realiza acest lucru, ați seta o dimensiune a fontului în vw. Această dimensiune se va scala cu lățimea browserului.
Caracteristică: Unități de vizualizare: vw, vh pe caniuse.com
In timp ce vh și vm sunt întotdeauna legate de înălțimea și lățimea portului de vizualizare, respectiv, Vmin și Vmax sunt legate de maxim sau minim din aceste lățimi și înălțimi, în funcție de care este mai mic și mai mare. De exemplu, dacă browserul a fost setat la lățime de 1100px și înălțime de 700px, 1vmin ar fi 7px și 1vmax ar fi 11px. Cu toate acestea, dacă lățimea a fost setată la 800px și înălțimea setată la 1080px, Vmin ar fi egal cu 8px în timp ce Vmax ar fi setat la 10.8px.
Deci, când ați putea folosi aceste valori?
Imaginați-vă că aveți nevoie de un element care să fie întotdeauna vizibil pe ecran. Folosind o înălțime și o lățime setată la a Vmin valoare sub 100 ar permite acest lucru. De exemplu, un element pătrat care atinge cel puțin două laturi ale ecranului poate fi definit astfel:
.cutie înălțime: 100vmin; lățime: 100vmin;
Dacă ai nevoie de o cutie pătrată care întotdeauna capace fereastra vizuală vizibilă (atingând tot timpul toate cele patru laturi ale ecranului), utilizați aceleași reguli, cu excepția cazului în care Vmax.
.cutie înălțime: 100vmax; lățime: 100vmax;
Combinațiile acestor reguli oferă o modalitate foarte flexibilă de a utiliza dimensiunea ferestrei de vizualizare în moduri noi și interesante.
Caracteristică: Unități de vizualizare: vmin, vmax pe caniuse.com
Unitățile fără și ch, similar cu em și rem, se bazează pe fontul și dimensiunea fontului curent. Cu toate acestea, spre deosebire de em și rem, aceste unități se bazează, de asemenea, pe familie de fonturi, deoarece acestea sunt determinate pe baza măsurilor specifice fonturilor.
ch unitate sau caracter unitatea este definită ca fiind "măsura avansată" a lățimii caracterului zero, 0. Unele discuții foarte interesante despre ce înseamnă acest lucru pot fi găsite pe blogul lui Eric Meyers, dar conceptul de bază este că, dată fiind un font monospațial, o cutie cu o lățime de N unități de caractere, cum ar fi lățime: 40ch;, poate conține întotdeauna un șir cu 40 de caractere în acel font special. În timp ce folosirea convențională a acestei reguli particulare se referă la aranjarea braille, posibilitățile de creativitate aici depășesc cu siguranță aceste aplicații simple.
fără unitatea este definită ca "înălțimea x a fontului curent sau o jumătate de unu em“.x înălțime a unui font dat este înălțimea literei mici din fontul respectiv. De multe ori, acest lucru este la mijlocul fontului.
x înălțime; înălțimea literei mici x (citiți mai multe despre Anatomia tipografiei web)Sunt mulți utilizează pentru acest tip de unitate, majoritatea fiind pentru micro-ajustări tipografice. De exemplu, cina element, ceea ce înseamnă superscript, pot fi împinse în sus în linie utilizând poziția relativă și o valoare inferioară de 1ex. În mod similar, puteți trage un element subscript în jos. Setările implicite ale browserului utilizează specificul suprascript și subscript vertical-align reguli, dar dacă doriți un control mai granular, ați putea să vă ocupați de acest tip mai explicit:
sup poziție: relativă; fund: 1ex; sub poziție: relativă; fund: -1ex;
fără unitate a fost în jur de la CSS1, deși nu veți găsi un astfel de sprijin solid pentru ch unitate. Pentru specificații privind asistența, verificați unitățile și valorile CSS pe blogul lui Eric Meyer.
Monitorizarea continuă a dezvoltării și extinderii CSS este incredibil de importantă, astfel încât să cunoașteți toate instrumentele din setul de instrumente. Poate că veți întâlni o problemă specială care necesită o soluție neașteptată utilizând una dintre aceste unități de măsură mai obscure. Aveți timp să citiți specificațiile noi. Înscrieți-vă pentru actualizări de știri de la resurse importante, cum ar fi cssweekly. Și nu uitați, înscrieți-vă acum pentru actualizări săptămânale, cursuri, tutoriale gratuite și resurse precum aceasta de la Web Design pe Tuts+!
Mai multă bunătate a unității CSS.
Accentsconagua