Unități relative în CSS

Unități Relative CSS

O unitate relativă își ia lungimea de la o altă proprietate de lungime, de exemplu de pe elementul părinte, de pe elementul rădăcină sau de pe viewport.

Astfel de unități se adaptează mai bine când ecranele au dimensiuni diferite.

Sfat: Pentru site-uri web scalabile și responsive, em și rem sunt alegeri excelente!

Viewport-ul este dimensiunea ferestrei browserului. Cum 1vw este egal cu 1% din lățimea sa curentă, la un viewport cu lățimea de 500px, 1vw este egal cu 5px.

Tabel cu unități relative

Tabelul listează unitățile CSS relative împreună cu referința față de care se măsoară fiecare.

index.html 
<table>
  <tr>
    <th>Unit</th>
    <th>Description</th>
  </tr>
  <tr>
    <td>em</td>
    <td>Relative to the font-size of the parent element</td>
  </tr>
  <tr>
    <td>rem</td>
    <td>Relative to the font-size of the root HTML element</td>
  </tr>
  <tr>
    <td>vw</td>
    <td>Relative to 1% of the width of the viewport. 100vw = full width of the viewport</td>
  </tr>
  <tr>
    <td>vh</td>
    <td>Relative to 1% of the height of the viewport. 100vh = full height of the viewport</td>
  </tr>
  <tr>
    <td>vmin</td>
    <td>Relative to 1% of viewport's smaller dimension</td>
  </tr>
  <tr>
    <td>vmax</td>
    <td>Relative to 1% of viewport's larger dimension</td>
  </tr>
  <tr>
    <td>%</td>
    <td>Relative to the size of the parent element</td>
  </tr>
  <tr>
    <td>fr</td>
    <td>A fractional unit. 1fr equals 1 part of the available space</td>
  </tr>
  <tr>
    <td>ch</td>
    <td>Relative to width of the "0" (zero) character</td>
  </tr>
</table>

Setează Dimensiunea Fontului cu Em

Pentru em, referința este dimensiunea fontului elementului părinte. Astfel, 2.5em înseamnă 40px sub un părinte cu dimensiunea fontului de 16px.

Titlurile din exemplul de mai jos au aceleași dimensiuni ca în exemplul anterior cu pixeli, dar cu em utilizatorii pot schimba dimensiunea textului din setările browserului.

Exemplu

Dimensiuni de font date în em:

Prompt
Creează o pagină care setează dimensiunea de bază a fontului pe body la 16px, apoi folosește unități em pentru a seta h1 la 2.5em (40px), h2 la 1.875em (30px) și p la 1em (16px). Include titluri de exemplu și un paragraf pentru a arăta dimensiunile.
Output: complete HTML page

Setează Dimensiunea Fontului cu Rem

Pentru rem, referința este dimensiunea fontului elementului rădăcină HTML (<html>).

O valoare em urmează dimensiunea fontului elementului părinte, dar o valoare rem se raportează întotdeauna la elementul <html>, indiferent unde apare în document. Designurile scalabile și responsive au mult de câștigat din asta: schimbi dimensiunea fontului pe <html>, iar tot ce este dimensionat în unități rem se scalează împreună pe întreaga pagină.

Majoritatea browserelor îi dau elementului <html> o dimensiune implicită a fontului de 16px. Astfel, 1rem este egal cu 16px, cu excepția cazului în care CSS-ul tău suprascrie această valoare.

Exemplu

Dimensiuni de font date în rem:

Prompt
Creează o pagină care setează dimensiunea fontului elementului rădăcină html la 16px, apoi folosește unități rem pentru a seta h1 la 2.5rem (40px), h2 la 1.875rem (30px) și p la 1rem (16px). Include titluri de exemplu și un paragraf pentru a arăta dimensiunile.
Output: complete HTML page