Care Este Diferența Dintre PX EM REM % VW și VH?
Când construiți cu Elementor, puteți observa că unele elemente au opțiuni de dimensionare, permițându-vă să alegeți PX EM REM % VW și VH. Dar ce înseamnă de fapt aceste opțiuni și când ar trebui să le folosești una în locul alteia?
Să începem cu elementele de bază.
În CSS, puteți specifica dimensiunile sau lungimile elementelor folosind diferite unități de măsură. Unitățile de măsură pe care le veți găsi în unele opțiuni Elementor includ PX EM REM % VW și VH, deși sunt mai multe disponibile în CSS. Nu fiecare element Elementor va oferi toate aceste unități. Elementor prezintă doar opțiunile care au cel mai mult sens pentru elementul dat.
Cel mai important aspect de învățat despre diferitele unități este că unele unități, cum ar fi PX, sunt unități absolute, iar unele sunt unități relative.
Unități Absolute
PX: Pixelii (px) sunt considerați unități absolute, deși sunt raportați la DPI și rezoluția dispozitivului de vizualizare. Dar pe dispozitivul în sine, unitatea PX este fixă și nu se modifică pe baza niciunui alt element. Utilizarea PX poate fi problematică pentru site-urile receptive, dar sunt utile pentru menținerea unei dimensiuni consistente pentru unele elemente. Dacă aveți elemente care nu ar trebui redimensionate, atunci folosirea PX este o alegere bună.
Unități Relative
EM: Relativ la elementul părinte
REM: Relativ la elementul rădăcină (etichetă HTML)
%: Relativ la elementul părinte
VW: Raportat la lățimea ferestrei de vizualizare
VH: Raportat la înălțimea ferestrei de vizualizare
Spre deosebire de PX, unitățile relative precum %, EM și REM sunt mai potrivite pentru designul receptiv și, de asemenea, ajută la îndeplinirea standardelor de accesibilitate. Unitățile relative se scalează mai bine pe diferite dispozitive, deoarece se pot scala în sus și în jos în funcție de dimensiunea altui element.
Să ne uităm la un exemplu simplu.
În majoritatea browserelor, dimensiunea implicită a fontului este de 16 px. Unitățile relative calculează dimensiunea din această bază. Dacă modificați acea bază setând o dimensiune de bază pentru eticheta HTML prin CSS, atunci aceasta devine baza pentru calcularea unităților relative în restul paginii. De asemenea, dacă un utilizator își ajustează dimensiunea fontului, atunci aceasta devine baza pentru calcularea unităților relative.
Deci, ce înseamnă aceste unități atunci când se ocupă de valoarea implicită de 16px?
Numărul pe care îl specificați va înmulți acel număr cu dimensiunea implicită.
1 em = 16 pixeli (1 * 16)
2em = 32px (2 * 16)
.5em = 8px (.5 * 16)
1rem = 16px
2rem = 32px
.5rem = 8px
100% = 16px
200% = 32px
50% = 8px
Ok, grozav, dar dacă fie tu, fie utilizatorul schimbați dimensiunea implicită? Deoarece acestea sunt unități relative, valorile dimensiunii finale se vor baza pe noua dimensiune de bază. Deși valoarea implicită este de 16 px, dacă dvs. sau utilizatorul l-ați schimbat la 14 px, atunci dimensiunile calculate ar ajunge să fie:
1em = 14px (1 * 14)
2em = 28px (2 * 14)
.5em = 7px (.5 * 14)
1rem = 14px
2rem = 28px
.5rem = 7px
100% = 14px
200% = 28px
50% = 7px
Acest lucru oferă utilizatorului libertatea de a-și ajusta dimensiunea implicită a fontului din browser, menținând în același timp scara relativă a fiecărui element pe care l-ați specificat.
Care este diferența dintre EM și REM?
Privind graficul de mai sus, arată că EM și REM arată exact la fel. Deci, cum diferă ele?
Mai simplu spus, ele diferă în funcție de moștenire. După cum am menționat, REM se bazează pe elementul rădăcină (HTML). Fiecare element copil care utilizează REM va folosi apoi dimensiunea rădăcină HTML ca punct de calcul, indiferent dacă un element părinte are sau nu dimensiuni diferite specificate.
EM, pe de altă parte, se bazează pe dimensiunea fontului elementului părinte. Dacă un element părinte are o dimensiune diferită decât elementul rădăcină, calculul EM se va baza pe elementul părinte, și nu pe elementul rădăcină. Aceasta înseamnă că elementele imbricate care folosesc EM pentru dimensionare pot ajunge uneori să fie o dimensiune pe care nu ați anticipat-o. Pe de altă parte, vă oferă un control mai fin dacă aveți nevoie de el pentru a specifica dimensiunea pentru o anumită zonă a paginii.
Deci, ce zici de %, VW și VH? Despre ce sunt toate acestea?
În timp ce PX, EM și REM sunt utilizate în principal pentru dimensionarea fonturilor, %, VW și VH sunt utilizate în principal pentru margini, umplutură, spațiere și lățimi/înălțimi.
Pentru a reitera, VH înseamnă „înălțimea portului de vizualizare”, care este înălțimea ecranului vizibil. 100VH ar reprezenta 100% din înălțimea ferestrei de vizualizare sau înălțimea completă a ecranului. Și, desigur, VW înseamnă „lățimea portului de vizualizare”, care este lățimea ecranului vizibil. 100VW ar reprezenta 100% din lățimea ferestrei de vizualizare sau lățimea completă a ecranului. % reflectă un procent din dimensiunea elementului părinte, indiferent de dimensiunea ferestrei de vizualizare.
Să ne uităm la câteva exemple de unde Elementor oferă opțiuni %, VW și VH.
Lățimi de coloane: Dacă editați aspectul unei coloane Elementor, veți observa că există o singură unitate de dimensionare a lățimii disponibilă – %. Lățimile coloanelor funcționează bine și receptiv numai atunci când se utilizează procente, așa că nu este oferită nicio altă opțiune.
Margini: Marjele unei secțiuni pot fi specificate fie în PX, fie în %. Utilizarea % este de obicei de preferat pentru a vă asigura că marjele nu devin mai mari decât conținutul atunci când reduceți pentru un dispozitiv mobil, de exemplu. Folosind un procent din lățimea dispozitivului, marginile dvs. vor rămâne relativ la dimensiunea conținutului, ceea ce este aproape întotdeauna de preferat.
Padding: Padding-ul (Umplutura) unei secțiuni poate fi specificată fie în PX, EM sau %. Ca și în cazul marginilor, este adesea de preferat să utilizați fie EM, fie %, astfel încât umplutura să rămână relativă pe măsură ce dimensiunea paginii se scarifică.
Dimensiunea fontului: Dacă editați tipografia unui element, cum ar fi un titlu, veți vedea patru opțiuni: PX, EM, REM și VH
Ați creat vreodată un titlu mare și la-ți admirat cât de grozav arăta pe desktop, doar pentru a realiza că era mult prea mare pe mobil?
Cheia pentru a rezolva acest lucru elegant este să folosiți fie EM, REM sau VW în loc de PX. Ceea ce alegeți depinde de situația dvs. particulară. De obicei, aleg EM pentru că vreau ca dimensiunea să fie relativă la părintele titlului. Dar dacă preferați ca dimensiunea să fie relativă la dimensiunea rădăcină (HTML), atunci alegeți în schimb REM. Sau, puteți seta să fie relativ la lățimea ferestrei de vizualizare (VW) dacă funcționează mai bine pentru cazul dvs.
Rețineți că puteți seta valori PX pentru dimensiunea fontului specific pentru fiecare dispozitiv, utilizând pictogramele dispozitivului pentru a specifica o dimensiune pentru desktop, tabletă și mobil. Dar asta încă pune limite în ceea ce privește receptivitatea și accesibilitatea, așa că țineți cont de asta dacă alegeți PX.
Mai multe despre VW și VH
Unitățile de vizualizare reprezintă un procent din portul de vizualizare curent al browserului (dimensiunea curentă a browserului). Deși este similar cu % unități, există o diferență. Unitățile de vizualizare sunt calculate ca procent din dimensiunea actuală a ferestrei de vizualizare a browserului. Pe de altă parte, unitățile procentuale sunt calculate ca procent din elementul părinte, care poate fi diferit de dimensiunea ferestrei de vizualizare.
Să luăm în considerare un exemplu de fereastră de vizualizare a ecranului mobil care are 480px x 800px.
1 VW = 1% din lățimea ferestrei de vizualizare (sau 4,8 px)
50 VW = 50% din lățimea ferestrei de vizualizare (sau 240 px)
1 VH = 1% din înălțimea ferestrei de vizualizare (sau 8px)
50 VH = 50% din înălțimea ferestrei de vizualizare (sau 400 px)
Dacă dimensiunea ferestrei de vizualizare se modifică, dimensiunea elementului se modifică, respectiv.
Când ar trebui să folosiți o unitate față de alta?
În cele din urmă, nu există un răspuns perfect pentru această întrebare. În general, este adesea cel mai bine să alegeți una dintre unitățile relative față de PX, astfel încât pagina dvs. web să aibă cele mai bune șanse de a reda un design frumos receptiv. Alegeți totuși PX, dacă trebuie să vă asigurați că un element nu se redimensionează niciodată la niciun punct de întrerupere și rămâne același, indiferent dacă un utilizator a ales o dimensiune implicită diferită. Unitățile PX asigură rezultate consistente, chiar dacă acest lucru nu este ideal.
EM este relativ la dimensiunea fontului elementului părinte, așa că dacă doriți să scalați dimensiunea elementului în funcție de dimensiunea elementului părinte, utilizați EM.
REM este relativ la dimensiunea fontului rădăcină (HTML), așa că dacă doriți să scalați dimensiunea elementului în funcție de dimensiunea rădăcinii, indiferent de dimensiunea părintelui, utilizați REM. Dacă ați folosit EM și găsiți probleme de dimensionare din cauza multor elemente imbricate, REM va fi probabil cea mai bună alegere.
VW este util pentru a crea elemente cu lățime completă (100%) care umple întreaga lățime a ferestrei de vizualizare. Desigur, puteți utiliza orice procent din lățimea ferestrei de vizualizare pentru a atinge alte obiective, cum ar fi 50% pentru jumătate din lățime etc.
VH este util pentru a crea elemente de înălțime completă (100%) care umple întreaga înălțime a ferestrei de vizualizare. Desigur, puteți folosi orice procent din înălțimea ferestrei de vizualizare pentru a atinge alte obiective, cum ar fi 50% pentru jumătate din înălțime etc.
% este similar cu VW și VH, dar nu este o lungime relativă la lățimea sau înălțimea ferestrei. În schimb, este un procent din lățimea sau înălțimea elementului părinte. Unitățile procentuale sunt adesea utile pentru a seta lățimea marginilor, de exemplu.
Elementor facilitează alegerea opțiunii care se potrivește cel mai bine pentru designul dvs. În cele din urmă, este alegerea ta.
