Unități de lungime CSS. Dimensionare cu unitati vw si vh

11.08.2019 Recenzii

Există unități noi în CSS3. (Se pare că am vorbit deja despre asta. ing) Ați auzit deja despre px, pt, em și noul rem. Să mai aruncăm o privire la câteva: vw și vh.

Adesea, există elemente în aspect care sunt garantate să se potrivească în fereastra de vizualizare a browserului. În general, JavaScript este folosit pentru aceasta. Să verificăm dimensiunea ferestrei de vizualizare și să redimensionăm elementele în consecință. Dacă utilizatorul redimensionează fereastra browserului, atunci procedura se repetă.

Cu vw / vh putem seta dimensiunea elementelor în raport cu dimensiunea ferestrei de vizualizare. Unitățile vw / vh sunt interesante deoarece 1vw este o unitate egală cu 1/100 "din lățimea vizorului. Pentru a da unui element o lățime egală cu lățimea ferestrei, de exemplu, trebuie să setați lățime: 100vw.

Cum poate fi folosit

Lightbox-urile sunt un candidat excelent pentru vw și vh, deoarece de obicei sunt poziționate în raport cu fereastra de vizualizare, totuși găsesc poziția: fixă cu valorile de sus, jos, stânga și dreapta mai ușor de utilizat, deoarece nu trebuie să setați înălțimea și lățimea deloc.

Puteți utiliza noile unități de măsură pentru a seta dimensiunea articolelor care sunt în flux normal. De exemplu, pot posta capturi de ecran pe pagină. Înălțimea acestor capturi de ecran nu trebuie să depășească înălțimea ferestrei de vizualizare. Pentru aceasta, pot seta înălțimea maximă a imaginilor:

Imag (înălțime maximă: 95vh;)

În acest caz, stabilesc înălțimea la 95vh pentru a lăsa puțin spațiu în jur când sunt pe ecran.

Suport pentru browser

În timp ce rem este acceptat de aproape toate browserele majore, inclusiv IE9, atunci folosirea vw și vh merită așteptarea. În prezent, doar Internet Explorer 9 le acceptă.

Unitățile CSS joacă un rol important în proiectarea site-ului web și dimensionarea diferitelor elemente. Valorile CSS pot fi exprimate ca numere pozitive sau negative, deși unele proprietăți acceptă doar numere pozitive. Valoarea numerică este însoțită de o abreviere din două litere care reprezintă unitatea reală de lungime. De exemplu cm (centimetri), px (pixeli) sau em CSS. O excepție de la această regulă este valoarea 0 (zero), care nu necesită o unitate de măsură.

Există două tipuri de unități CSS: absolute și relative.

Unități de lungime CSS absolute

Unitățile CSS absolute nu sunt bune pentru web design. Ele reprezintă o denumire digitală a rezultatelor măsurătorilor în lumea fizică și sunt independente de dimensiunea și rezoluția ecranului. Lungimile absolute cu aceeași valoare pot diferi pe ecrane diferite. Acest lucru este cauzat de diferența de DPI a ecranului (puncte pe inch).

Ecranele de înaltă rezoluție au un DPI mai mare decât ecranele cu rezoluție mai mică, ceea ce face ca imaginile și textul să pară mai mici pe ele. Unitățile absolute sunt folosite în definirea stilurilor în tipărire, unde măsurătorile se fac în inci, puncte și vârfuri.

Unități de lungime absolută:

cm (centimetri);
mm (milimetri);
in inchi);
pc (vârfuri);
pt (puncte);
px (pixeli).

Cele mai multe unități absolute de lungime sunt inutile pe internet. Singura excepție este px. Pixelii sunt unități relative în raport cu rezoluțiile ecranului. Pentru imprimante și monitoare de foarte înaltă rezoluție, un pixel în CSS este egal cu mai mulți pixeli de pe ecran, astfel încât numărul de pixeli pe inch este de aproximativ 96. Pixelul este cea mai mică unitate de măsură și este de obicei folosit ca referință pentru alții.

Unități de lungime relativă în CSS

Unitățile de lungime relativă în CSS nu sunt fixe. Valorile acestora depind de alte valori de referință sau funcții. Sunt mai solicitați în design web, deoarece facilitează determinarea dimensiunii unui element. Cu ajutorul lor, puteți seta lățimea, înălțimea, dimensiunea fontului etc. în raport cu alți parametri de bază.

Unități relative specifice fontului

Unitățile relative specifice fontului se referă la o dimensiune de font predefinită sau la valoarea proprietății familiei de fonturi:

ex (înălțimea caracterului x);
ch ( lățimea caracterelor zero (0));
em unitate în CSS (înălțimea fontului elementului curent);
rem ( dimensiunea fontului elementului rădăcină).

ex

Definit ca „ înălțimea caracterului x al fontului curent SAU jumătate 1 em”. Adică, înălțimea literei minuscule x a fontului instalat. Când se schimbă valoarea proprietății font-family, unitatea de schimb se schimbă.

cap

Egal cu lățimea caracterului 0. Această unitate de măsură se modifică și atunci când se modifică valoarea proprietății familiei de fonturi.

ei

Unitatea em CSS are o valoare egală cu dimensiunea fontului elementului principal sau părinte. De exemplu, dacă dimensiunea fontului elementului părinte este 30px, atunci 1em va fi calculat ca 30px (30 x 1) pentru toți copiii. Numărul nu trebuie să fie întreg. Dacă în exemplu înlocuim 1em cu 0,5, atunci valoarea va fi 15px (30 x 0,5).

Unitatea em este setată la valoarea etichetei părinte. Acest lucru poate duce la rezultate nedorite atunci când se utilizează elemente imbricate.

Să presupunem că avem trei elemente imbricate. Primul element (rădăcină) are o dimensiune a fontului de 30px, iar cele două elemente imbricate au o dimensiune a fontului de 2em. Un element imbricat la rădăcină va avea o dimensiune a fontului calculată ca 60px (30 x 2). Și elementul imbricat în el va avea o dimensiune a fontului calculată ca 120px (60 x 2).

rem

rem este similar cu em CSS, dar valoarea sa rămâne întotdeauna aceeași cu dimensiunea fontului elementului rădăcină. Unitatea rem este utilă atunci când proiectați site-uri responsive, deoarece vă permite să scalați întreaga pagină prin modificarea dimensiunii fontului în elementul HTML.

Unități procentuale de lungime în funcție de dimensiunea ferestrei de vizualizare

Fereastra se bazează pe lățimea și înălțimea ferestrei și include:

vh ( înălțimea ferestrei);
vw ( lățimea ferestrei de vizualizare);
vmin ( cel mai mic dintre (vw, vh));
vmax ( cel mai mare dintre (vw, vh)).

vw

Aceasta este lățimea ferestrei de vizualizare. 1vw este egal cu 1/100 din lățimea ferestrei de vizualizare. Un pic ca procentele, cu excepția faptului că valoarea rămâne aceeași pentru toate elementele, indiferent de lățimea elementelor părinte. De exemplu, dacă lățimea ferestrei este de 1000px, atunci 1vw va fi de 10px.

vh

La fel ca vw ( lățimea ferestrei de vizualizare), numai această unitate de măsură depinde de înălțimea ferestrei de vizualizare. 1vh este egal cu 1/100 din înălțimea vizualizării. De exemplu, dacă înălțimea ferestrei browser este 900px, atunci 1vh va fi 9px.

vmin

Vmin este 1/100 din valoarea minimă dintre înălțimea și lățimea ferestrei de vizualizare. Cu alte cuvinte, 1/100 din partea cea mai scurtă. De exemplu, dacă dimensiunile ferestrei 1200 x 800 pixeli atunci valoarea vmin va fi 8px.

vmax

vmax este 1/100 din valoarea maximă dintre înălțimea și lățimea ferestrei de vizualizare. Cu alte cuvinte, 1/100 din cea mai lungă latură. De exemplu, dacă dimensiunile ar fi 1200 x 800 pixeli atunci vmax este 12px.

Interes%

Distanța, dată în procente, depinde de lungimea elementului părinte. De exemplu, dacă elementul părinte are 1000 px lățime și copilul său este 50% din această valoare, atunci copilul va avea 500 px lățime.

SUPORT DE BROWSER

em CSS, ex, px, cm, mm, in, pt și pc

sunt acceptate în toate browserele, inclusiv în versiunile mai vechi de IE.

Unul dintre cele mai confuze aspecte CSS este aplicația marimea fontului atribut pentru scalarea textului. Folosind CSS, puteți redimensiona textul din browser folosind patru unități diferite. Care dintre aceste patru unități este cea mai bună pentru web? Aceasta este o întrebare care a generat o varietate de discuții și critici. Găsirea unui răspuns definitiv este dificilă, deoarece întrebarea în sine este complexă.

Faceți cunoștință cu unitățile

1. „Ems” (em): „em” este o unitate scalabilă care este utilizată în documentele web. „Em” este egal cu dimensiunea fontului curent, de exemplu, dacă dimensiunea fontului din document este 12pt, 1em este egal cu 12pt. „Em” este scalabil în natură, deci 2em va fi 24pt, 0.5em va fi 6pt și așa mai departe. Folosirea lui „em” devine din ce în ce mai populară în documentele web datorită scalabilității și capacității de a fi utilizate în mod util pe dispozitivele mobile.
2. Pixeli (px): „px” sunt unități de dimensiune fixă care sunt utilizate pe ecrane (de exemplu, pentru citirea pe ecranul unui computer). Un pixel este egal cu un punct pe ecranul unui computer (cea mai mică unitate a rezoluției ecranului). Mulți designeri web folosesc px în documentele lor web pentru a obține o prezentare perfectă a site-ului lor web într-un browser. Una dintre problemele cu utilizarea px este că aceste unități nu permit zoom-ul pentru cititorii cu deficiențe de vedere sau dispozitivele mobile.
3. Puncte (pt): „pt”, folosit în mod tradițional în mediile tipărite (tot ce trebuie tipărit pe hârtie etc.). Un „pt” este egal cu 1/72 de inch. „Pt”, ca „px”, are o dimensiune fixă a unității și nu poate fi scalat.
4. Procente (%): unitățile % sunt similare cu „em”, cu excepția câtorva diferențe fundamentale. În primul rând, dimensiunea actuală a fontului este de 100% (adică 12 pt = 100%). Când utilizați „%”, textul dvs. este complet scalabil pentru dispozitive mobile și accesibilitate.

Deci, care este diferența?

Va fi ușor de înțeles diferența dintre unitățile de dimensiune a fontului atunci când le veți vedea în acțiune. De obicei, 1em = 12pt = 16px = 100%. Cu aceste dimensiuni de font, să vedem ce se întâmplă când creșteți dimensiunea de bază a fontului (folosind selectorul de corp CSS) de la 100% la 120%.

Schimbați dimensiunea fontului de la 100% la 120%.

După cum puteți vedea, „em” și „%” au crescut dimensiunea fontului, în timp ce „px” și „pt” nu. Setarea unei dimensiuni absolute pentru textul tău poate fi simplă, dar este mult mai bine ca vizitatorii tăi să folosească text scalabil care poate fi afișat pe orice dispozitiv sau orice mașină. Din acest motiv, unitățile „em” și „%” sunt preferate pentru textul unui document web.

„Em” vs „%”

Am aflat că unitățile „px” și „pt” nu sunt cele mai bune pentru documentele web, ceea ce ne obligă să folosim „em” și „%”. În teorie, unitățile „em” și „%” sunt identice, dar în practică au diferențe minore care sunt importante de luat în considerare.

În exemplul de mai sus, am folosit procente (în eticheta body) ca unitate de bază a mărimii fontului. Dacă schimbați unitatea de bază pentru dimensiunea fontului de la „%” la „em” (adică corpul (dimensiunea fontului: 1em;)), dvs., ar trebui să nu observa diferenta. Să vedem ce se întâmplă atunci când „1em” este unitatea noastră de bază și când clientul modifică „Dimensiunea fontului” în setările browserului (această caracteristică este furnizată în multe browsere, de exemplu, Internet Explorer).

Dimensiunea fontului când clientul redimensionează textul în browser.

Când dimensiunea textului este setată la „medie” în browserul clientului, nu se observă nicio diferență între „em” și „%”. Cu toate acestea, dacă parametrul este modificat, diferența devine foarte mare. Cu setarea „Mai mic”, „em” este mult mai mic decât „%”, iar cu setarea „Mai mare”, dimpotrivă, „em” este afișat mult mai mare decât „%”. În timp ce mulți susțin că unitățile din „em” sunt scalate conform intenției, în practică, textul din „em” este scalat prea brusc, făcând cel mai mic text ilizibil pe unele mașini.

Verdict

În teorie, unitățile „em” sunt standardul nou și viitor pentru dimensiunea fontului pe Internet, dar în practică, unitățile „%” permit ca textul să fie afișat mai consecvent și mai convenabil pentru utilizatori. La modificarea parametrilor clientului, textul în „%” s-a schimbat în proporții rezonabile, ceea ce le permite designerilor să mențină lizibilitatea, accesibilitatea și designul.

Câştigător: procente (%).

Au fost adăugate noi unități relative în CSS3, cum ar fi vh, vw, vmin, vmax. Aceste unități sunt calculate în funcție de dimensiunea ferestrei browserului. Pentru desktop-uri, fereastra browserului este mai lată decât fereastra de vizualizare (adăugând lățimea barei de defilare), așa că dacă setați lățimea la 100vw pentru element, acesta va ieși în afara html.

Orez. 1. Imagine de fundal pe ecran complet cu lățime de 100 vw