Jednostki w CSS

Czy wiedzieliście, że w CSS możecie określić długość linii tekstu w liczbie znaków? Tak, jest wiele opcji do wyboru, nie tylko piksele. Te przeróżne jednostki przydają się nam do określenia wymiarów elementów (model pudełkowy!), a także rozmiaru fontu. Zapoznajmy się zatem z kilkoma najpopularniejszymi.

• %, czyli procenty. Możemy określać wymiary elementu w procentach. Będą one wtedy wyrażały te wymiary względem rodzica elementu (czyli kontenera, w którym dany element się znajduje). Procenty są przydatne, jeśli chcemy uzyskać elastyczny layout, którego elementy zmieniają wymiary płynnie wraz ze skalowaniem okna.

.fluid-container {
  width: 33.33%;
}

• em – podczas, gdy piksele reprezentują fizyczne piksele na ekranie i są jednostką bezwzględną, em jest jednostką względną i odnosi się do rozmiaru fontu rodzica elementu. Jeśli nadamy elementowi rozmiar lub wielkość fontu równą 1em, będzie to oznaczało, że wymiar ten jest równy rozmiarowi fontu jego bezpośredniego rodzica. Spójrzmy na przykład:

<div class="grandpa">
  Jestem dziadkiem
  <div class="father">
    Jestem ojcem
    <div class="son">
      Jestem synem
    </div>
  </div>
</div>

.grandpa {
  font-size: 1.5em; /* 16px */
}

.father {
  font-size: 1.5em; /* 1.5 * 16px = 24px */
}


.son {
  font-size: 1.5em; /* 1.5 * 24px = 36px */
}

Jestem dziadkiem Jestem ojcem Jestem synem

Edytuj na CodePen

Widzicie więc, że pomimo, iż każdy z elementów posiada identyczną wartość font-size – 1.5em – wynikowe wielkości się różnią. Na początku może się Wam to wydawać mało intuicyjne, jednak w miarę jak będziecie się stawać bardziej zaawansowani, odkryje się przed Wami bogactwo zastosowań dla em.

• rem – również jest to jednostka względna. Jej nazwę można rozwinąć jako "root em". Działa więc podobnie do em z tą różnicą, że wartość wynikowa jest obliczana względem korzenia (root) drzewa dokumentu HTML. Zwykle oznacza to, że wartości rem obliczane są względem wielkości fonta zadeklarowanego wewnątrz selektora html.

<section class="outer">
  <h1>Nagłówek zewnętrzny</h1>
  <p>Paragraf umieszczony w zewnętrznej sekcji.</p>
  <section class="inner">
      <h2>Nagłówek wewnętrzny</h2>
      <p>Paragraf umieszczony w wewnętrznej sekcji.</p>
  </section>
</section>

html {
  font-size: 16px;
}

.outer {
  font-size: 1.5rem; /* 1.5 * 16px = 24px */
}

.inner {
  font-size: 2rem; /* 2 * 16px = 32px */
}

Nagłówek zewnętrzny

Paragraf umieszczony w zewnętrznej sekcji.

Nagłówek wewnętrzny

Paragraf umieszczony w wewnętrznej sekcji.

Edytuj na CodePen

• vw (ang. vieport witdh) oraz vh (ang. viewport height). Są to jednostki dotyczące wysokości i szerokości okna przeglądarki. 1vw oznacza 1/100 szerokości okna, a 1vh – 1/100 wysokości okna.

.scalable-element {
  width: 50vh; /* Zajmuję połowę wysokości okna przeglądarki */
  height: 100vw; /* Zajmuję całą szerokość okna */
}