Specificați unitățile de măsură pentru dimensiunile caracterelor. Un ghid rapid pentru unitățile CSS

Unități Dimensiuni CSS sunt folosite pentru a specifica cantități în diferite proprietăți. Ele sunt împărțite în absolute și relative.

Unități absolute

Unitățile de măsură absolute includ centimetri (cm), milimetri (mm) și inci (inchi). Deși sunt concepute pentru a afișa elemente pe o pagină web în mod uniform, browserul nu poate calcula întotdeauna cu exactitate dimensiunea fizică a afișajului sau a monitorului, deci diferite dispozitive elementele pot avea dimensiuni diferite.

Un cm (dimensiunea fontului: 1cm; ) .one-mm (dimensiunea fontului: 1mm; ) .one-in (dimensiunea fontului: 1in; )

De obicei, aceste unități de măsură sunt utilizate atunci când se specifică dimensiunea pentru imprimarea paginilor.

Unități tipografice

Unitățile de măsură tipografice includ punctele (pt) și vârfurile (pc). Un punct (1 pt) are o dimensiune fixă ​​de 1/72" în timp ce un pica (1 buc) este 1/6" (1 buc = 12 pt). Aceste două unități de măsură sunt cele mai utile în stilurile scrise pentru documente tipărite, mai degrabă decât pentru utilizarea pe ecrane.

Un punct (dimensiunea fontului: 1pt; ) .one-pica (dimensiunea fontului: 1buc; )

Unități relative

Unitățile de măsură relative includ pixeli (px) și procentele (%). Un procent este o unitate de măsură care nu are nicio legătură directă cu dimensiunea fontului unui element sau cu dimensiunea elementului în sine. Valoarea unei proprietăți setate ca procent depinde direct de valoarea aceleiași proprietăți stabilite pentru element părinte. De exemplu, dimensiunea fontului este setată în raport cu dimensiunea fontului elementului părinte, iar înălțimea și lățimea sunt exprimate ca procent în raport cu înălțimea și lățimea zonei de conținut a elementului părinte.

Un pixel (dimensiunea fontului: 1px; ) .one-percent (dimensiunea fontului: 1%; )

Pixel este un punct egal cu un pixel fizic de pe ecran. Cu toate acestea, browserele nu calculează întotdeauna cu exactitate dimensiunea ferestrei de vizualizare în pixeli.

Sa luam in considerare ultimele modele laptopuri, tablete si smartphone-uri dotate cu ecrane cu Rezoluție înaltă. Pe astfel de dispozitive, browserul nu corelează unitatea px cu numărul de pixeli fizici de pe ecran. În schimb, normalizează unitatea px pentru a aduce experiența de vizualizare mai aproape de cea a unui monitor desktop tradițional, cu densități de pixeli variind de la 96 la 120 de pixeli/inch. Ca rezultat, un pătrat cu o latură de 10px poate fi desenat de browser pe un smartphone, astfel încât să existe de la 15 până la 20 de pixeli fizici pe fiecare parte. Aceasta înseamnă că px se întâmplă să fie și o unitate de măsură relativă.

Unități relative dependente de font

Două unități de măsură relative suplimentare sunt em și ex. Em este înălțimea fontului curent, ex este înălțimea caracterului "x" minuscul din fontul specificat.

One-ex (dimensiunea fontului: 1ex; ) .one-em (dimensiunea fontului: 1em; )

La fel ca procentele, em este o unitate de măsură comună folosită în mod obișnuit pentru a seta dimensiunea fontului pentru textul de pe o pagină web.

CSS3 introduce două unități de măsură suplimentare: rem și ch. Rem - dimensiunea fontului elementului rădăcină ( ), poate fi folosit în locul em pentru a preveni dimensiunea fontului părinte sau strămoș să afecteze dimensiunea fontului elementului curent.

One-rem (dimensiunea fontului: 1rem; )

Unitatea ch este egală cu lățimea caracterului zero (0) din fontul elementului. Utilizarea acestuia poate fi utilă pentru a determina lățimea unui câmp care conține text, deoarece 1ch corespunde aproximativ unui caracter.

Unitatea ch este acceptată numai în Chrome 27+, Firefox 19+ și IE9. Rem este acceptat în Chrome 4+, Firefox 3.6+, IE9+, Safari 4.1+ și Opera 11.6+.

Unități de vizualizare

Unitățile de vizualizare includ vw (lățime) și vh (înălțime), care vă permit să scalați elementele în raport cu fereastra, care este partea vizibilă a paginii web.

Latime: 50vw; /* 50% din lățimea ferestrei de vizualizare */ înălțime: 25vh; /* 25% din înălțimea ferestrei de vizualizare */

Două unități suplimentare sunt vmin și vmax, care specifică valoarea minimă sau maximă pentru dimensiunea ferestrei de vizualizare.

Latime: 1vmin; /* 1vh sau 1vw, oricare dintre acestea este mai mic */ înălțime: 1vmax; /* 1vh sau 1vw, oricare dintre acestea este mai mare */

Unitățile de vizualizare relative sunt acceptate în Chrome 26+, Firefox 19+, IE11+, Safari 6.1+ și Opera 15+.

Valori unitare

Valorile nu trebuie specificate ca numere întregi; ele pot fi specificate și ca zecimale. Unele proprietăți vă permit, de asemenea, să specificați valori negative ca valori.

P ( dimensiunea fontului: 0,394 in; ) /* zecimal */ p ( marja: -1px; ) /* valoare negativă */

Rețineți că declarația nu va funcționa dacă unitatea de măsură este precedată de un spațiu sau dacă unitatea de măsură nu este specificată (cu excepția unei valori zero). Dacă se folosește zero ca valoare, unitatea de măsură poate fi omisă.

P ( dimensiunea fontului: 1ex; ) /* corect */ p ( mărimea fontului: 0; ) /* corect */ p ( mărimea fontului: 0ex; ) /* corect */ p ( mărimea fontului: 1 ex; ) ; ) /* incorect */ p ( dimensiunea fontului: 1; ) /* incorect */

Ori de câte ori o declarație CSS conține o eroare, aceasta este ignorată de browser, în timp ce restul declarației continuă să funcționeze.

Unul dintre cele mai confuze aspecte CSS este aplicația marimea fontului atribut pentru scalarea textului. Folosind CSS puteți modifica dimensiunea textului în browser folosind patru unități diferite măsurători. 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 utilizate în mod util în dispozitive mobile Oh.
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%. Când utilizați aceste dimensiuni de font, să vedem ce se întâmplă când creșteți dimensiunea bazei font (folosind selectoare CSS 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 (%).

Au fost adăugate noi unități relative la CSS3, cum ar fi vh, vw, vmin, vmax. Aceste unități sunt calculate în funcție de dimensiunea ferestrei browserului. Pentru computere desktop lățimea ferestrei browserului mai multa latime viewport (se adaugă lățimea barei de derulare), așa că dacă setați lățimea elementului la 100vw, acesta va depăși html.

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

Suport pentru browser

IE: 9.0 cu excepția vmax, utilizați vm în loc de vmin
Margine: 12.0, cu excepția vmax, utilizați vm în loc de vmin
Firefox: 19.0
Crom: 26.0
Operă: 15.0
Safari: 6.1
iOS Safari: 8.0
Android: 4.4
Crom pentru Android: 55.0

1. Unitățile vh și vw

Tehnici design web responsive se bazează pe utilizarea valorilor procentuale. Dar interesul este departe de a fi Cea mai bună decizie pentru fiecare caz, deoarece acestea sunt calculate în raport cu dimensiunile celui mai apropiat element părinte. Prin urmare, dacă doriți să utilizați înălțimea și lățimea ferestrei browserului, este mai bine să utilizați unități vh și vw. De exemplu, dacă înălțimea ferestrei browserului este de 900 px, atunci 1vh va fi de 9 px. De asemenea, dacă lățimea ferestrei browserului este de 1600 px, atunci 1vw va fi de 16 px.

1.1. Imagine de fundal receptivă pe tot ecranul

Deoarece lățimea elementului specificată cu 100vw este mai mare decât lățimea ferestrei de vizualizare, pentru a crea imagini de fundal pe ecran complet este mai bine să utilizați o lățime de 100%, care va fi egală cu lățimea elementului html rădăcină.

Fullscreen-bg ( fundal: url(image.jpg); poziția fundal: centru; dimensiunea fundal: coperta; lățime: 100%; înălțime: 100vh; ) Orez. 2. Imagine de fundal receptivă pe tot ecranul

1.2. Efect de diapozitiv pe întreaga pagină

Pentru a bloca întreaga înălțime a ferestrei browserului, trebuie să setați înălțimea: 100%; pentru trei elemente - html, body și direct pentru blocul în sine:

Html, corp ( înălțime: 100%; ) secțiune ( înălțime: 100%; )

Deoarece dimensiunile procentuale sunt calculate în raport cu valorile elementelor părinte, trebuie să setați valorile adecvate pentru fiecare element DOM. Unitatea de măsură vh nu necesită înlănțuire a valorilor, deoarece valoarea sa este calculată direct în raport cu fereastra browserului:

Secțiune (înălțime: 100vh; )

Efectul răsfoirii diapozitivelor când faceți clic pe săgeată este implementat folosind scenariu mic jQuery:

JQuery(document).ready(function($) ( $("nav").on("clic", function() ( if ($(this).hasClass("jos")) ( var movePos = $(window) ).scrollTop() + $(window).height(); ) if ($(this).hasClass("sus")) ( var movePos = $(window).scrollTop() - $(window).height( ); ) $("html, body").animate(( scrollTop: movePos), 600); )); ));

Înălțimea specificată cu vh poate fi folosită și pentru a centra un element pe pagină.

Am menționat noi (relativ) unități de măsură. Aceste unități sunt vw, vh, vmin și vmax și se bazează pe dimensiunea ferestrei de vizualizare a browserului. Dimensiunea lor reală se modifică pe măsură ce se modifică fereastra de vizualizare a browserului, ceea ce face ca aceste unități să fie ideale pentru design adaptiv. Deși în postarea mea anterioară am argumentat împotriva utilizării acestor unități pentru a specifica dimensiunile fonturilor, ele pot fi foarte utile pentru lucrul cu elemente de aspect.

Unități de vizualizare

Unități măsurători de vizor sunt unități relative, ceea ce înseamnă că nu pot fi măsurate obiectiv. Dimensiunea lor este determinată de dimensiunea ferestrei de vizualizare a browserului. Există patru unități legate de fereastra de vizualizare.

Mă voi concentra pe primele două, deoarece sunt cele mai frecvent utilizate. În multe cazuri unități de vizualizare(vh și vw) se intersectează cu procentele din punct de vedere al capacităților. Cu toate acestea, fiecare dintre ele are propriile sale puncte forte și puncte slabe.

Pentru a rezuma, arată astfel:

Când aveți de-a face cu lățimea, % este mai bun, iar când aveți de-a face cu înălțimea, vh este mai bun.

Elemente de lățime completă a paginii: % > vw

După cum am spus deja, vw determină dimensiunea elementului în funcție de lățimea ferestrei de vizualizare. Cu toate acestea, browserele calculează dimensiunea pe baza spațiului pentru bara de defilare.

Dacă lățimea paginii depășește lățimea ferestrei de vizualizare, apare o bară de defilare. Cu toate acestea, în realitate, lățimea ferestrei de vizualizare este mai mare decât lățimea elementului html

Viewport > html > body

Deci, dacă setați lățimea elementului la 100vw, elementul se va extinde dincolo de html și body. V în acest exemplu Am făcut un chenar roșu în jurul elementului html și am umplut secțiunile cu diferite culori.

Din cauza acestei nuanțe, este mai bine să creați elemente pe întreaga lățime a paginii folosind procente, decât să vă bazați pe lățimea ferestrei de vizualizare.

Elemente pentru înălțimea întregii pagini: vh > %

Când creați elemente care trebuie să aibă aceeași înălțime ca și pagina, este mult mai bine să folosiți vh în loc de procente. Deoarece dimensiunea procentuală a unui element este relativă la elementul său părinte, putem obține înălțimea elementului înălțime egală ecran numai dacă elementul său părinte ocupă și întreaga înălțime a ecranului. Aceasta înseamnă că trebuie să poziționăm elementul ca fix pentru a face element html părinte, sau recurge la utilizarea unui fel de hack.

Utilizarea vh pentru a obține acest efect este destul de simplă:

Exemplu (înălțime: 100vh; )

Indiferent de cum este imbricat elementul .example, dimensiunile acestuia pot fi setate în raport cu dimensiunile ferestrei de vizualizare. Problema derulării nu ne va deranja deoarece majoritatea site-urilor nu au o bară de defilare orizontală

Iată câteva exemple despre cum pot fi utilizate unitățile vh.

Imagini de fundal pe ecran complet

O utilizare tipică a unității vh este de a crea imagine de fundal, care se întinde pe toată înălțimea și lățimea ecranului, indiferent de dimensiunea dispozitivului. Acest lucru este destul de ușor de făcut.

Bg ( poziție: relativă; fundal: url("bg.jpg") centru/copertă; lățime: 100%; înălțime: 100vh; )

Într-un mod similar, putem crea un efect de „pagini” dând fiecărei secțiuni dimensiunile ferestrei de vizualizare.

Secțiune ( lățime: 100%; înălțime: 100vh; )

Putem folosi JavaScript pentru a crea iluzia de întoarcere a paginii.

$("nav").on("click", function() ( if ($(this).hasClass("jos")) ( var movePos = $(window).scrollTop() + $(window).height (); ) if ($(this).hasClass("sus")) ( var movePos = $(window).scrollTop() - $(window).height(); ) $("html, body"). animate(( scrollTop: movePos ), 1000); ))

Imagine pliabilă

Vh poate fi folosit și pentru a controla dimensiunea unei imagini dintr-o pagină. De exemplu, în cadrul unui articol. Vrem să ne asigurăm că orice imagine va fi afișată în întregime, indiferent de dimensiunea ecranului.

Vom avea nevoie de următorul cod

Img ( width: auto; /* Lățimea automată să fie proporțională cu înălțimea */ max-width: 100%; /* Nu mai mult decât lățimea elementului părinte */ max-height: 90vh; /* Nu mai mult decât înălțimea a ferestrei de vizualizare */ margine: 2rem auto; )

Suport pentru browser

Deoarece aceste unități sunt relativ noi, există încă probleme cu anumite browsere.

Iată cum să le rezolvi.

CSS folosește unități absolute și relative pentru a dimensiona diferite elemente. 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ăți relative folosit de obicei pentru lucrul cu text. În tabel 1 enumeră principalele unități relative.

Unitatea em este valoare modificabilă, care depinde de dimensiunea fontului elementului curent (dimensiunea 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 a browserului sau cu dimensiunea fontului elementului părinte. Notarea procentuală este identică cu em, prin aceea că valorile 1em și 100% sunt egale.

Unitatea 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.

Unitatea ch este egală cu lățimea caracterului „0” pentru elementul curent și, ca și em, depinde de dimensiunea fontului.

Diferența dintre em și rem este următoarea. em depinde de dimensiunea fontului părintelui elementului și se modifică odată cu acesta, iar rem este legat de element rădăcină, adică dimensiunea fontului specificată pentru elementul html.

Există, de asemenea, un grup de unități relative legate de dimensiunea ferestrei de vizualizare a browserului. În tabel 2 arată o listă a acestora cu o descriere.

Unități absolute

Unitățile absolute reprezintă dimensiuni fizice- inci, centimetri, milimetri, puncte, pic și pixeli. Pentru dispozitivele cu dpi scăzut (numărul de pixeli pe inch determină densitatea pixelilor), legarea este pe pixel. În acest caz, un inch este egal cu 96 de pixeli. Evident, inch real nu se va potrivi cu inch pe un astfel de dispozitiv. Pe dispozitivele cu DPI ridicat, inch real este același cu inch de pe ecran, astfel încât dimensiunea pixelilor este calculată ca 1/96 de inch. În tabel 3 enumeră unitățile absolute de bază.

Exemplu

antet de 30 px

Dimensiunea textului 1,5 em

Titlu de 24 de puncte

Deplasați textul la dreapta cu 30 de milimetri

Notă

Când setați dimensiuni, asigurați-vă că specificați unitățile de măsură, de exemplu lățime: 30px. În caz contrar, browserul nu va putea afișa rezultatul dorit deoarece nu înțelege ce dimensiune ai nevoie. Unitățile nu sunt adăugate numai când valoare zero(marja: 0).

Internet Explorer acceptă unitatea vm în loc de vmin .

Specificație

Fiecare specificație trece prin mai multe etape de aprobare.

• Recomandare - Specificația a fost aprobată de W3C și este recomandată ca standard.
• Recomandarea candidatului ( Recomandare posibilă ) - grupul responsabil de standard este mulțumit că își îndeplinește obiectivele, dar necesită ajutor din partea comunității de dezvoltare pentru implementarea standardului.
• Recomandare propusă Recomandare sugerată) - în această etapă documentul este înaintat Consiliului Consultativ W3C pentru aprobare finală.
• Proiect de lucru - O versiune mai matură a unui proiect care a fost discutat și modificat pentru revizuire comunitară.
• Schița redactorului ( Proiect editorial) - o versiune preliminară a standardului după ce au fost făcute modificări de către editorii de proiect.
• Ciornă ( Proiect de specificație) - prima versiune a standardului.

×