Unități

Multe proprietăți CSS, cum ar fi width, margin, padding, font-size etc. iau lungimea. CSS are o modalitate de a exprima lungimea în mai multe unități. Lungimea este o combinație între un număr și o unitate fără spațiu alb. De exemplu 5px, 0.9em etc.

Lungime

Unități de lungime comună

Există mai multe unități folosite de CSS pentru a exprima lungimea. Cele mai vechi, acceptate de toate browserele, sunt:

  • rem – „r” înseamnă „rădăcină”: „rădăcină em” -, care este egală cu dimensiunea fontului fixată elementului rădăcină (aproape întotdeauna <html>).
  • vh și vw – Multe tehnici de design web responsive se bazează în mare măsură pe reguli procentuale. Cu toate acestea, măsurile procentuale CSS nu sunt întotdeauna cea mai bună soluție pentru toate problemele. Masura vh este egal cu 1/100 din înălțimea ferestrei. De exemplu, dacă înălțimea browserului este de 800 px, 1vh este egal cu 8 px și, în mod similar, dacă lățimea ferestrei este de 650 px, 1vw este echivalent cu 6,5 px.
  • vmin și vmax – Aceste unități sunt legate de valoarea maximă sau minimă a vh și vw. De exemplu, dacă browserul a fost setat la 1200px lățime și înălțimea 600px, 1vmin ar fi 6px și 1vmax ar fi 12px. Cu toate acestea, dacă lățimea a fost setată la 700 px și înălțimea setată la 1080px, vmin ar fi egal cu 7 px și vmax 10.8px.
  • ex și cap – Aceste unități, asemănătoare cu em și rem, mizați-vă pe fontul curent și dimensiunea fontului. Cu toate acestea, spre deosebire de em și rem, se bazează și pe aceste unități font-family deoarece sunt determinate pe baza măsurilor specifice fiecărui font. cap unitate („unitate de caractere”) este definită ca lățimea caracterului zero („0”). ex unitatea este definită ca „înălțimea x curentă a fontului curent sau jumătatea lui 1em”. Înălțimea-x a unui font dat este înălțimea literei mici „x” a respectivului font. Este adesea semnul de mijloc al fontului.
CSS Unit Guide CSS em rem vh vw si multe

Există două tipuri generale de unități utilizate pentru lungime și dimensiune în CSS: relativă și absolută.

Unități relative

Unitățile relative se modifică în raport cu dimensiunea curentă a fontului elementului sau cu alte setări. Unele unități relative sunt

em

ad-banner
  • lățimea unei litere majuscule M a font-size a elementului curent.
  • Dimensiunile fonturilor sunt moștenite din elementele părinte.

Exemplu:

div {
font-size: 16px;
}
div h3 {
font-size: 2rem;
}

Aici <h3> va fi egal 32px din moment ce font-size a elementului curent sau părinte este 16px.

rem

  • rădăcină em, sau lățimea unei majuscule M a bazei implicite font-size.
  • Dimensiunile fontului părinte nu vor avea efect.

Exemplu:

body {
font-size: 16px;
}
p {
font-size: 1.5rem;
}

Aici <p> va fi egal 24px de la baza implicită font-size este 16px.

%

  • procentul de mărime în raport cu dimensiunea unui părinte.

Exemplu:

div {
width: 400px;
}
div p {
width: 75%;
}

Deoarece lățimea părintelui este 400px, lățimea pargrafului interior ar fi 300pxsau 75% din 400px.

vw

  • lățimea vizualizării sau 1/100 din lățimea ferestrei

Exemplu:

body {
width: 100vw;
}

body completați lățimea ferestrei de vizualizare, indiferent dacă aceasta este de 417 px, 690 px sau orice lățime.

vh

  • înălțimea vizualizării sau 1/100 din înălțimea ferestrei de vizualizare

Exemplu:

div {
height: 50vh;
}

Acest div va umple jumătate din înălțimea ferestrei, indiferent dacă este 1080px, 1300px sau orice înălțime.

Unități absolute

Unitățile absolute vor fi aceleași indiferent de dimensiunea ecranului sau de alte setări. Unele unități absolute sunt

px

  • pixel
  • numărul de pixeli este relativ la calitatea ecranului dispozitivului de vizionare

in, cm, mm

  • inch, centimetru, milimetru
  • Un inch este un inch pe un ecran mic sau pe un ecran mare

pt, pc

  • puncte (1/72 de inch) și picas (12 puncte)

Exemplu

p {
  font-size: 24px;
}
div {
  width: 3in;
  border-width: 3pt;
}

Un paragraf cu font-size: 24px va apărea ca 24px pe un telefon, tabletă sau desktop.

div va apărea cu o lățime de 3 inci, iar border pe div va avea o grosime de 3/72 de inch, indiferent de dimensiunea ecranului.