Jednostki miary CSS

Jednostki miary w CSS są kluczowym elementem, który pozwala precyzyjnie określać rozmiary i odstępy elementów na stronie internetowej. Dlatego wybór odpowiedniej jednostki ma istotne znaczenie dla responsywności oraz ogólnej estetyki projektowanej strony. Dodatkowo w tym kursie omówię różne rodzaje jednostek miary w CSS oraz ich zastosowanie.

W definiowaniu stylu CSS dla poszczególnych znaczników możemy posługiwać się miarami

Absolutnymi – wartość jest stała bez względu na rozmiar.
Relatywnymi – wielkość dopasowana jest do rozmiaru konkretnego ekranu.
Elastycznymi – dostosowują się do zmian wielkości okna przeglądarki lub urządzenia

Rodzaje jednostek miary w CSS

Przede wszystkim CSS oferuje szeroką gamę jednostek miary, które można stosować do określania rozmiarów elementów, odstępów, marginesów oraz innych właściwości. Co więcej wybór odpowiedniej jednostki zależy od kontekstu i celu, jakim jest zapewnienie odpowiedniego układu i responsywności strony.

Miary absolutne

Absolutne jednostki miary mają stałą wartość i nie zmieniają się w zależności od kontekstu.

px – pixele
in – cale
pt – punkty
pc – pika
cm – centymetry
mm – milimetry

<p style="font-size: 22px;">Pierwszy akapit font 2px.</p>
<p style="font-size: 0.3in;">Drugi akapit font 0.3in.</p>
<p style="font-size: 15pt;">Trzeci akapit font 15pt.</p>
<p style="font-size: 1pc;">Czwarty akapit font 1pc.</p>
<p style="font-size: 1cm;">Piąty akapit font 1cm.</p>
<p style="font-size: 5mm;">Szósty akapit font 5mm.</p>

Pierwszy akapit font 2px.

Drugi akapit font 0.3in.

Trzeci akapit font 15pt.

Czwarty akapit font 1pc.

Piąty akapit font 1cm.

Szósty akapit font 5mm.

Miary relatywne

Relatywne jednostki miary są zależne od kontekstu lub rozmiaru elementu rodzica.

Procenty (%) – określają wielkość elementu względem jego kontenera.
EM (em) – określa wielkość elementu na podstawie bieżącej wielkości czcionki.
REM (rem) – określa wielkość elementu na podstawie wielkości czcionki elementu html.

<p style="font-size: 10%;">Pierwszy akapit font 80%.</p>
<p style="font-size: 3.5em;">Drugi akapit font 3.5em.</p>
<p style="font-size: 2.0rem;">Trzeci akapit font 2.0rem.</p>

Pierwszy akapit font 80%.

Drugi akapit font 3.5em.

Trzeci akapit font 2.0rem.

Miary elastyczne

Elastyczne jednostki miary są odpowiednie do tworzenia responsywnych layoutów, ponieważ dostosowują się do zmian wielkości okna przeglądarki lub urządzenia.

Viewport width (vw) – określa wielkość w procentach szerokości okna przeglądarki.
Viewport height (vh) – określa wielkość w procentach wysokości okna przeglądarki.

.section {
  width: 100vw; /* 100% szerokości okna przeglądarki */
  height: 50vh; /* 50% wysokości okna przeglądarki */
}

Dobór odpowiednich jednostek miary

Z pewnością wybór odpowiednich jednostek miary zależy od konkretnej sytuacji i potrzeb projektowych. Piksele są często stosowane do określania konkretnych rozmiarów, podczas gdy procenty i jednostki relatywne są preferowane do responsywnego projektowania. Z kolei jednostki viewport są używane do dynamicznego dostosowania elementów do wielkości ekranu.

Praktyczne zastosowania jednostek miary w CSS

Responsywne układy – użycie procentów i jednostek viewport do tworzenia elastycznych układów dostosowanych do różnych urządzeń.
Fonty i tekst – użycie em i rem do określania rozmiarów czcionek, które dziedziczą wielkość fontu rodzica.
Marginesy i odstępy – stosowanie różnych jednostek miary do określania odstępów między elementami.