unități de măsură CSS sunt esențiale în crearea de site-uri și dimensionarea diferitelor elemente. Valorile CSS pot fi exprimate ca numere pozitive sau negative, cu toate că unele proprietăți au doar numere pozitive. Valoarea numerică însoțită de o abreviere de două litere care reprezintă unitatea de lungime efectivă. De exemplu, cm (centimetri), px (pixeli) sau le CSS. O excepție de la această regulă este setat la 0 (zero), care nu are nevoie pentru a intra în unitate.
unități de măsură CSS sunt de două tipuri: absolută și relativă.
Unități de lungime absolute în CSS
Unități CSS absolute nu sunt potrivite pentru web design. Ele reprezintă desemnarea numerică a rezultatelor de măsurare în lumea fizică și nu depinde de rezoluția ecranului și dimensiunea. Lungimea absolută cu una și aceeași valoare pot fi diferite pe diferite ecrane. Acest lucru este cauzat de diferența în ecranul DPI (dots per inch).
ecrane de înaltă rezoluție au un DPI mai mare decât cu ecrane de rezoluție mai mici, ceea ce le face imaginea și textul apar mai mici. Unități absolute sunt utilizate în determinarea stiluri în industria de imprimare în cazul în care măsurătoarea este în inci, puncte și vârfuri.
Cele mai multe unități de lungime absolute sunt inutile pe Internet. Singura excepție este px. Pixelii sunt unități relative în ceea ce privește rezoluția ecranelor. Pentru imprimante și ecrane de rezoluție foarte mare într-un singur pixel egal CSS mai mulți pixeli pe ecran, astfel încât numărul px per inch este de aproximativ 96. Un pixel este cea mai mică unitate de măsură și este utilizat în mod obișnuit ca referință pentru alții.
Unități de lungime relative în CSS
Relativ la unitățile de lungime CSS nu sunt valori fixe. Valorile lor depind de alte valori sau funcții specificate. Ele sunt mai mult în cerere, în web design, deoarece simplifică definirea dimensiunii elementului. Ele pot fi folosite pentru a seta lățimea, înălțimea, dimensiunea fontului, și așa mai departe. E. în raport cu ceilalți parametri de bază.
Unități relative, în funcție de fontul
unități relative de măsură, în funcție de font, se referă la o dimensiune de font predeterminată sau valoarea font-family:- ex (înălțime x simbol);
- ch (lățimea simbolului zero (0));
- Unitate le în CSS (înălțime font al acestui element);
- rem (dimensiunea fontului elementului rădăcină).
Definită ca „înălțimea caracterului x în fontul curent sau jumătate din 1 em“. Aceasta este înălțimea unei litere mici x font instalat. Atunci când valoarea proprietății se schimbă font-family unitate de măsură ex este schimbat.
Lățimea caracterului egal 0. Această măsură variază, de asemenea, cu valoarea proprietății font-familie.
em unitate CSS are o valoare egală cu dimensiunea fontului principal sau părinte. De exemplu, dacă elementul părinte dimensiunea fontului 30px. 1em valoarea va fi calculată ca 30px (30 x 1) pentru toate elementele de copil. Numărul nu trebuie să fie un număr întreg. Dacă înlocuiți 1em în exemplul 0.5, valoarea va 15px (30 x 0,5).
Unitatea em are o etichetă valoarea părintelui. Acest lucru poate duce la rezultate nedorite atunci când se utilizează elemente imbricate.
Să presupunem că avem trei elemente imbricate. Prima intrare (root) are 30px dimensiunea fontului. și două subelemente - font în 2em. Element încorporat în rădăcină va avea o dimensiune de font, calculat ca 60 pixeli (30 x 2). Un membru încorporat în acesta, va avea o dimensiune de font, calculat ca 120px (60 x 2).
rem em CSS similare. dar valoarea sa este întotdeauna egală cu dimensiunea fontului elementului rădăcină. Unitatea rem de măsurare este utilă atunci când proiectarea site-uri adaptive, deoarece vă permite să scară întreaga pagină, modificați dimensiunea fontului în elementul HTML.
interes%
Procentul distanță prestabilită depinde de lungimea elementului părinte. De exemplu, dacă elementul părinte 1000px lățime. iar elementul său copil - 50% din această valoare, lățimea elementului subsidiar este 500px.
Browser-ul Suport
em CSS, ex, px, cm, mm, in, pt, și PC
Este acceptată în toate browserele, inclusiv versiunile mai vechi ale IE.
Toate utilizate browsere, inclusiv IE9 +.
vw, Vh și Vmin
Chrome 20+. IE 9 +. Firefox 19+. Safari 6+. Opera 20+. Internet Explorer acceptă Vmin sintaxă neobișnuită vm.
Chrome 20+. Firefox 19+ și 20+ Opera și Safari 6.1+. Nici un sprijin în IE.
Traducerea articolului „GHID RAPID DE LA CSS UNITĂȚI Length“ a fost pregătit de o echipă de proiect prietenos Web design de la A la Z.