Valori css relative. Unități CSS (pixeli, Em și Ex) și funcție calc. Exemple

Utilizarea atributului font-size pentru a scala textul este unul dintre cele mai dificile aspecte stylingîn CSS. CSS oferă patru unități pentru a măsura dimensiunea textului afișat într-un browser web. Care dintre aceste patru unități este cea mai potrivită pentru documente web? Această problemă a stârnit multe discuții și controverse. Este dificil să dai un răspuns cert la o astfel de întrebare.

Cunoașterea unităților

Hm ( ei): em este o unitate scalabilă care este utilizată pentru documente web. Un em este egal cu dimensiunea actuală a fontului. De exemplu, dacă dimensiunea fontului documentului este de 12 pt, atunci 1 em este egal cu 12 pt. Deoarece em este scalat, 2em este egal cu 24pt, .5em este egal cu 6pt etc. Datorită scalabilității și compatibilității ridicate cu dispozitivele mobile, em este din ce în ce mai folosit în documentele web.

Pixeli ( px): Pixelii sunt unități de dimensiuni fixe care sunt utilizate pentru tot ceea ce este citit pe ecranul unui computer. Un pixel este egal cu un punct pe ecranul unui computer (aceasta este cea mai mică diviziune a rezoluției ecranului). Mulți designeri web folosesc pixeli în documentele web pentru a se asigura că site-ul web pare perfect pixeli atunci când este afișat într-un browser. Singura problemă este că pixelii nu pot fi măriți pentru a găzdui cititoare cu vederea slabă sau reduse pentru o citire mai ușoară pe dispozitivele mobile.

Puncte ( pct): Punctele sunt folosite în mod tradițional în publicații tipărite(adică pentru tot ceea ce este tipărit pe hârtie). Un punct este egal cu 1/72 de inch. Punctele sunt foarte asemănătoare cu pixelii prin faptul că au o dimensiune fixă ​​și nu pot fi mărite/micșurate.

1. Procent ( % ): Procentul este foarte asemănător cu em , cu excepția câtorva diferențe cheie. În primul rând, dimensiunea actuală a fontului este de 100% (adică 12 pt = 100%). Utilizarea unității Procent vă permite să măriți/reduceți textul pentru o citire mai ușoară.

Care este diferența?

Diferența dintre aceste unități este ușor de înțeles la exemple concrete. Iată cum se leagă între ele: 1em = 12pt = 16px = 100%. Să vedem ce se întâmplă când creștem dimensiunea fontului principal (folosind selectorul CSS de corp) de la 100% la 120%.

După cum puteți vedea, Ems și Procentage cresc pe măsură ce dimensiunea fontului de bază crește, dar Pixelii și punctele nu cresc. Este ușor să utilizați o dimensiune absolută pentru textul dvs., dar este mult mai ușor să utilizați text scalabil care se afișează pe orice dispozitiv. Prin urmare, este de preferat să folosiți unitățile Em și Procent pentru textul unui document web.

EM sau procent?

Am descoperit că Point și Pixel nu sunt cele mai bune unități pentru documente web. Deci, am rămas cu Em și Percent. Teoretic, Em și Procent sunt aceleași unități, dar în practică există diferențe minore între ele care nu pot fi ignorate.

În exemplul de mai sus, am folosit unitatea Procent ca dimensiune de bază a fontului (pentru eticheta body). Dacă te schimbi dimensiunea bazei font de la Percent la Em (adică body ( font-size: 1em; )), atunci cel mai probabil nu veți observa diferența. Să vedem ce se întâmplă când dimensiunea fontului corpului este 1em și când clientul modifică setarea „Dimensiune text” a browserului (această setare este disponibilă în unele browsere, cum ar fi Internet Explorer).

Când dimensiunea textului din browserul clientului este setată la „medie”, nu există nicio diferență între Em și Procent. Dar dacă modificați această setare, diferența va deveni destul de vizibilă. Cu cea mai mică setare, Ems sunt mult mai mici decât procente. Și cu setarea „Cel mai mare”, opusul este adevărat - Em este mult mai mare decât Procent. Ați putea spune că unitățile Em sunt scalate așa cum ar trebui, dar, în practică, un astfel de text este scalat prea puternic, iar pe unele dispozitive cel mai mic text devine ilizibil.

Concluzie

În teorie, unitatea Em este noul standard pentru dimensiunile fonturilor din documentele web, dar în practică se dovedește că unitatea Procent este mai ușor de utilizat. Când setările clientului se modifică, textul care utilizează unitatea Procent se scalează corespunzător, permițând designerilor să mențină lizibilitatea, accesibilitatea și designul vizual.

Câștigător: procent (%).

De obicei când creez design nou apoi pentru elementul body folosesc procente (corp (dimensiunea fontului: 62,5%; )) și apoi folosesc em pentru a scala mai departe. Atâta timp cât setările pentru corp sunt setate la Procent, puteți utiliza fie Procent, fie Em pentru orice alte reguli și selectoare CSS și, totuși, puteți profita de avantajele utilizării Procentaj ca dimensiune principală a fontului.

În ultimii ani, această practică a devenit foarte comună în designul web.
Pixelii sunt acum folosiți ca unități valide de dimensiune a fontului (utilizatorii pot folosi funcția de „zoom” a browserului pentru a citi text mic). Cu toate acestea, utilizarea pixelilor devine problematică din cauza dispozitivelor mobile cu ecrane foarte mari. densitate mare pixeli (unii dispozitive Android iar iPhone au o densitate de 200-300 de pixeli pe inch, ceea ce face ca fonturile de 11 și 12 pixeli să fie dificil de citit). Deci, continui să folosesc procentul ca dimensiune principală a fontului pentru documentele web.

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 de măsură diferite. Care dintre aceste patru unități este cea mai bună pentru web? Aceasta este o întrebare care a dat naștere la diverse 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 prin natură, deci 2em va fi egal cu 24pt, 0.5em va fi egal cu 6pt etc. Utilizarea lui „em” devine din ce în ce mai populară în documentele web datorită scalabilității și capacității sale de a fi util pe dispozitivele mobile.
2. Pixeli (px): „px” sunt unități de dimensiuni fixe care sunt utilizate pe ecrane (cum ar fi pentru citirea pe ecranul unui computer). Un pixel este egal cu un punct de pe ecranul computerului (cel mai mic element al rezoluției ecranului). Mulți designeri web folosesc px în documentele web pentru a obține o reprezentare perfectă a pixelilor site-ului lor atunci când este afișat într-un browser. Una dintre problemele cu utilizarea px este că aceste unități nu permit scalarea pentru cititoarele 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”, au o dimensiune fixă ​​a unității și nu poate fi scalat.
4. Procente (%): unitățile procentuale sunt similare cu „em”, cu excepția câtorva diferențe cheie. În primul rând, dimensiunea actuală a fontului este de 100% (adică 12 pt = 100%). Prin utilizarea „%”, textul dvs. devine complet scalabil pentru dispozitive mobile și ușurință în utilizare (accesibilitate).

Deci, care este diferența?

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

Modificarea dimensiunii 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 dvs. poate fi ușoară, dar este mult mai bine pentru vizitatori să folosească text scalabil care poate fi afișat pe orice dispozitiv sau mașină. Din acest motiv, unitățile „em” și „%” sunt de preferat să fie folosite pentru textul unui document web.

„em” vs „%”

Am aflat că unitățile „px” și „pt” nu sunt în cel mai bun mod posibil sunt potrivite 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ă pentru dimensiunea 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 său (multe browsere, precum Internet Explorer, au această opțiune).

Dimensiunea fontului când clientul modifică dimensiunea textului în browser.

Când dimensiunea textului este setată la „medie” în browserul clientului, nu există nicio diferență notabilă între „em” și „%”. Cu toate acestea, dacă parametrul este modificat, diferența devine foarte mare. Când este setat la „Mai mic”, „em” este mult mai mic decât „%”, iar când este setat la „Mai mare”, dimpotrivă, „em” este afișat mult mai mare decât „%”. Și în timp ce mulți susțin că unitățile din „em” se scalează așa cum este intenționat, în practică textul din „em” se scalează prea dramatic, ceea ce face ca textul cel mai mic să devină ilizibil pe unele mașini.

Verdict

În teorie, unitățile „em” sunt noul și viitorul standard de dimensiune a fontului pe web, dar, în practică, unitățile „%” permit textului să fie afișat mai consecvent și mai convenabil pentru utilizatori. La modificarea parametrilor clientului, textul în „%” s-a modificat în proporții rezonabile, ceea ce le permite designerilor să mențină lizibilitatea, accesibilitatea și designul.

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

Salutări, dragi cititori ai blogului webcodius! Pentru a seta diferite dimensiuni elemente html pagini, există unități de măsură în CSS. Mai mult, pot fi utilizate atât unități relative, cât și absolute.

Unități absolute conectat la lumea fizică și independent de dispozitivul de ieșire. Următoarele unități pot fi folosite pentru a le indica:

Unitățile absolute sunt utilizate mai rar decât unitățile relative și sunt folosite în principal pentru a seta dimensiunea textului. Și pentru a indica dimensiunea textului, folosesc în principal un punct (pt), care se obține prin împărțirea unui inch în 72 de părți. Un inch, la rândul său, este egal cu aproximativ 25,4 milimetri, respectiv, un punct este aproximativ egal cu o treime de milimetru. Un exemplu de utilizare a unităților de măsură absolute:

Dimensiune 12 milimetri

Dimensiune 1 centimetru

Dimensiune 1 inch

Dimensiune 24 de puncte

Vârf mărime 1

Unități de măsură relative

Pentru a afișa informații pe monitor, este mai bine să utilizați unități de măsură relative. Deoarece dimensiunea fizică a punctelor (pixeli) care alcătuiesc imaginile de pe monitor poate varia în funcție de tip și dimensiune fizică același monitor. De asemenea, dimensiunea pixelilor depinde rezoluție stabilită ecran. Unități relative de bază:

1 px în CSS, așa cum am spus mai sus, acesta este un punct de pe ecranul utilizatorului, cantitate fizica care depinde de rezoluția dispozitivului și de distanța de la care o persoană privește suprafața acestuia.
La specificarea procentelor, dimensiunea este calculată în funcție de mărime element părinte. Deci, de exemplu, dacă lățimea elementului părinte este de 500px, atunci dacă specificați lățime:50%, lățimea elementului va fi de 250px.

ei este legat de dimensiunea implicită a fontului a browserului sau de dimensiunea fontului elementului părinte. A ex este înălțimea literei majuscule (mică) „x” (x) în Aspect latin. Adică, em este, de asemenea, legat de dimensiunea implicită a fontului din browser sau de dimensiunea fontului elementului părinte. Exemple:

Dimensiune 20 pixeli

Dimensiune 150%

Marimea 2 em

Marimea 2 ex

Rezultat:

În plus față de cele de mai sus, există un grup de unități relative legate de dimensiunea ferestrei de vizualizare a browserului:

Exemple de utilizare:

Marimea 2 vw

Dimensiune 2vh

Mărimea 2 vmin

Dimensiunea 2 vmax

funcția calc().

Folosit pentru a specifica o valoare calculată Proprietăți CSS, care folosesc un număr ca valoare. În primul rând, calc poate fi folosit pentru a calcula dimensiunile, unghiurile și timpul. În plus, funcția vă permite să amestecați diferite unități de măsură, de exemplu, lățimea unui div poate fi setată astfel:

div(
lățime: calc (100% - 40px);
}

În acest caz, lățimea div-ului va fi egală cu lățimea elementului părinte minus 40 de pixeli.

Puteți utiliza următoarele operații aritmetice în expresii:

• + - adaos. Caracterul este separat prin spații pe ambele părți (înălțime: calc (20% + 50px));
• — — scădere. Caracterul este separat prin spații pe ambele părți (lățime: calc (90% - 10px););
• * — înmulțire (padding: calc (2em*2););
• / - Divizia. Împărțirea la zero este interzisă (lățimea: calc (100%/4);).

ÎN Browsere Firefox până la versiunea 16.0 este acceptată funcția -moz-calc, în Chrome până la versiunea 26.0 și în Safari din versiunea 6.0 -webkit-calc este acceptată.

De exemplu, într-un aspect flexibil al site-ului web cu două coloane, trebuie să ne asigurăm că există o distanță de 50 px între coloane la orice dimensiune a ferestrei browserului. Apoi cu ajutorul funcții calc aceasta se face după cum urmează:

Puteți specifica lungimea în CSS în unități diferite. Unele dintre ele provin din tradiția tipografică, cum ar fi punctul (pt) și pica (pc), altele, de ex. centimetrul (cm) și inch (in) ne sunt familiare în utilizarea de zi cu zi. Există, de asemenea, o unitate „magică” inventată special pentru CSS: px. Înseamnă asta că proprietăți diferite necesită unități diferite?

Nu, unitățile de măsură nu sunt legate de proprietăți, ci sunt direct legate de mediile de afișare: ecran sau hârtie.

Orice unitate de măsură poate fi folosită oriunde. O proprietate cu o valoare în pixeli (marja: 5px) acceptă și valori în inci sau centimetri (marja: 1.2in; margine: 0.5cm) și invers.

Dar, în general, este mai bine să utilizați diferite seturi de unități pentru afișare pe ecran și pentru imprimare. Sfaturile pentru utilizarea unităților sunt rezumate în următorul tabel:

Relația dintre unitățile absolute este: 1 in = 2,54 cm = 25,4 mm = 72 pt = 6 buc

Dacă aveți o riglă la îndemână, puteți verifica acuratețea dispozitivului. Iată un dreptunghi înalt de 1 inch (2,54 cm):
72pt
↓

Așa-numitele unități absolute (cm, mm, in, pt și pc) în CSS înseamnă același lucru ca peste tot, dar numai dacă dispozitivul de ieșire are o rezoluție suficient de mare. La o imprimantă laser, 1 cm trebuie să fie exact egal cu 1 centimetru. Dar pe dispozitive rezolutie scazuta, ca și ecranele computerelor, CSS nu necesită acest lucru. Într-adevăr, diferite dispozitive si diferite Implementări CSS străduiți-vă să le afișați diferit. Este mai bine să lăsați aceste unități pentru dispozitive de înaltă rezoluție, în special pentru imprimare. Ceea ce vedeți pe ecranele computerelor și pe dispozitivele mobile poate să nu fie ceea ce vă așteptați.

În trecut, CSS cerea ca unitățile absolute să fie afișate corect chiar și pe ecranele computerelor. Dar, deoarece au existat mai multe implementări incorecte decât cele corecte și nu se așteptau îmbunătățiri, CSS a abandonat această cerință în 2011. În prezent, unitățile absolute sunt necesare pentru a funcționa corect doar atunci când sunt imprimate și pe dispozitive de înaltă rezoluție.

CSS nu specifică ce se înțelege exact prin „rezoluție înaltă”. Dar din moment ce imprimantele ieftine de astăzi au cel puțin 300 dpi și ecrane bune aproximativ 200 dpi, granița se află cel mai probabil undeva între aceste valori.

Un alt motiv pentru a nu folosi unități absolute nicăieri decât în ​​tipărire: pornit diferite ecrane privim de la distante diferite. 1 centimetru pe ecran calculator desktop pare mic. Dar mai departe ecranul mobil chiar sub ochii tăi - asta e mult. Este mai bine să folosiți unități relative, de ex. ei.

Unitățile em și ex depind de dimensiunea fontului și pot fi diferite pentru fiecare element din document. Unitatea em este pur și simplu dimensiunea fontului. Într-un element căruia îi este dat un font de 2in, 1em înseamnă aceste 2in. Specificarea dimensiunilor (de exemplu, pentru indentări) în em înseamnă că acestea sunt setate în raport cu fontul și orice font pe care îl are utilizatorul este mare (de exemplu, ecran mare) sau mic (de exemplu, on dispozitiv mobil), aceste dimensiuni vor rămâne proporționale. Declarații precum text-indent: 1.5em și margin: 1em în CSS sunt extrem de populare.

Unitatea ex este folosită rar. Exprimă dimensiunile, care ar trebui măsurate de la înălțimea x a fontului. Înălțimea X este, aproximativ vorbind, înălțimea litere mici ca A, c, m, sau o. Fonturi cu aceeași mărime(și, în consecință, cu același em) poate exista o diferență uriașă în dimensiunile literelor mici, iar dacă este important ca o imagine, de exemplu, să corespundă înălțimii x, ex-unitatea vă stă la dispoziție.

Unitatea px din CSS este magică. Nu are legătură cu fontul actual, dar de obicei nu are legătură nici cu centimetrii fizici sau inci. O unitate px este definită ca ceva mic, dar vizibil, de exemplu. linie orizontală Grosimea de 1 px poate fi redată cu margini clare (fără anti-aliasing). Ceea ce este considerat clar, mic și vizibil depinde de dispozitiv și de modul în care îl utilizați: dacă îl țineți direct în fața ochilor, cum telefon mobil, la distanță de braț, ca un monitor, sau undeva la mijloc, ca e-carte? Prin urmare, px prin definiție nu este o lungime fixă, ci ceva care depinde de tipul de dispozitiv și de utilizarea sa normală.

Pentru a înțelege de ce unitatea px este așa cum este, imaginați-vă un monitor CRT din anii 1990: cel mai mic punct pe care l-ar putea afișa era de aproximativ 1/100 de inch (0,25 mm) sau puțin mai mare. Unitatea px își are numele de la acești pixeli ai ecranului.

Dispozitivele actuale pot, în principiu, să afișeze puncte mai mici, clare (deși pot fi dificil de văzut fără lupă). Dar documentele din secolul trecut care au folosit px în CSS arată la fel, indiferent de dispozitiv. Imprimantele în special pot afișa în mod clar linii mult mai subțiri decât 1px, dar chiar și pe imprimante o linie de 1px arată aproape la fel ca pe un monitor. Dispozitivele se schimbă, dar unitatea px arată întotdeauna la fel.

De fapt, CSS necesită ca 1px să fie exact egal cu 1/96 de inch în orice tipărire. În CSS, se crede că imprimantele, spre deosebire de ecrane, nu au nevoie marimi diferite pentru ca px să afișeze linii clare. Prin urmare, atunci când este tipărit, px nu numai că arată la fel indiferent de dispozitiv, dar este și măsurat prin aceeași valoare (la fel ca și unitățile cm, pt, mm, in și pc, așa cum este explicat).

CSS definește și asta imagini raster(de exemplu fotografii) sunt afișate implicit la o scară de 1 pixel a imaginii cu 1 pixel. O fotografie cu o rezoluție de 600 x 400 va avea 600 px lățime și 400 px înălțime. Astfel, pixelii fotografiei nu sunt legați de pixelii dispozitivului de ieșire (care poate fi foarte mic), ci de unități px. Acest lucru vă permite să aliniați cu precizie imaginile cu alte elemente ale documentului, atâta timp cât utilizați unități px în stilurile dvs., mai degrabă decât pt , cm , etc.

Pentru a seta dimensiunile diferitelor elemente, CSS utilizează unități de măsură absolute și relative. Unitățile absolute sunt independente de dispozitivul de ieșire, dar unitățile relative definesc dimensiunea unui element în raport cu valoarea unei alte dimensiuni.

Unități relative

Unitățile relative sunt de obicei folosite pentru a lucra cu text sau când trebuie să calculați procentîntre elemente. În tabel 1 enumeră principalele unități relative.

O valoare variabilă care depinde de dimensiunea fontului elementului curent (este setată prin proprietatea stil font-size). Fiecare browser are o dimensiune de text încorporată care este utilizată atunci când această dimensiune nu este specificată în mod explicit. Prin urmare, inițial 1em este egal cu dimensiunea implicită a fontului setată în browser. În consecință, atunci când setăm dimensiunea textului pentru întreaga pagină în em, lucrăm cu acest parametru. În cazul în care em este folosit pentru element specific, 1em este dimensiunea fontului părintelui său.

ex este definită ca înălțimea caracterului „x” minuscul. ex este supus acelorași reguli ca em , și anume că este legat de dimensiunea implicită a fontului a browserului sau de dimensiunea fontului elementului său părinte.

Un pixel este un punct elementar afișat de un monitor sau de altul dispozitiv similar, de exemplu, un smartphone. Dimensiunea pixelilor depinde de rezoluția dispozitivului și de caracteristicile sale tehnice.

Exemplul 1 arată utilizarea acestor unități.

Exemplul 1: Utilizarea unităților relative

Marimea 2 em

Marimea 2 ex

Dimensiune 30 pixeli

Dimensiune 200%

Rezultat acest exemplu prezentat mai jos (Figura 1).

Orez. 1. Dimensiunea textului cu diferite unități

Unități absolute

Unitățile absolute sunt utilizate mai rar decât cele relative și, de regulă, atunci când se lucrează cu text. În tabel 2 enumeră principalele astfel de unități.

Poate cea mai comună unitate este punctul, care este folosit pentru a indica dimensiunea fontului. Mulți oameni sunt obișnuiți să seteze dimensiunea fontului în editorii de text, de exemplu, 12. Dar nu înțeleg ce înseamnă acest număr. Deci acestea sunt exact punctele, sunt native. Bineînțeles că nu sunt nativi de la noi, suntem obișnuiți să măsurăm totul în milimetri și unități similare, dar punctul este poate singura valoare dintr-un sistem de măsurare nemetric care se folosește peste tot în țara noastră. Și toate mulțumesc editori de textȘi sisteme de publicare. Exemplul 2 arată utilizarea punctelor și a altor unități.

Exemplul 2: Utilizarea unităților absolute

Dimensiune 0,5 inci

Dimensiune 8 mm

Dimensiune 24 de puncte

Rezultatul utilizării unităților de măsură absolute este prezentat mai jos (Fig. 2).

Orez. 2. Dimensiunea textului cu diferite unități