> For the complete documentation index, see [llms.txt](https://the-awwwesomes-2.gitbook.io/tutorial-the-awwwesomes-html-and-css/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://the-awwwesomes-2.gitbook.io/tutorial-the-awwwesomes-html-and-css/the-awwwesomes-tutorial-www-beginners-3/jednostki-w-css.md).

# 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](https://developer.mozilla.org/en/docs/Web/CSS/length). 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.

```css
.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:

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

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

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


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

&#x20;Jestem dziadkiem Jestem ojcem Jestem synem

[Edytuj na CodePen](http://codepen.io/theawwwesomes/pen/grXgoJ)

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

```markup
<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>
```

```css
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](http://codepen.io/theawwwesomes/pen/QEOdmy)

* `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.

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