Jak zapewne wiecie CSS posiada wiele jednostek długości. Ale czy znacie ich cechy chrakterystyczne? W tym wpisie przyjrzę się im bliżej oraz przedstawię przykłady ich użycia.
Jednostki długości w CSS podzielone zostały na dwa typy:
- jednostki względne, nazywane także relatywnymi,
- Jednostki bezwzględne, nazywane także absolutnymi.
Jednostki względne
To takie jednostki, które są uzależnione od innego rozmiaru, np. wielkości czcionki w aktualnym elemencie lub wielkości okna przeglądarki. Jednostki te zostały także podzielone na dwie grupy:
- Jednostki względne czcionki
- Jednostki względne obszaru wyświetlania
Jednostki względne czcionki
To jednostki, które nadawaną wartość przeliczają na podstawie wielkości czcionki. Poniżej przedstawiam jednostki względne czcionki:
- em – wysokość czcionki danego elementu,
- ex – wysokość litery „x”, czyli małej litery danego elementu,
- ch – szerokość cyfry „0” (zero) danego elementu,
- rem – wysokość czcionki elementu <html>.
Jednostka em uzależniona jest od wielkości czcionki w stylowanym elemencie. W przypadku kiedy nasz element <html> ma ustawioną wielkość czcionki na 16px, dla elementu <body> ustawimy 2em, a następnie będziemy chcieli w nowym elemencie ustawić 3em to w efekcie uzyskamy 16*2*3=96px. Czy aby na pewno taki rozmiar czcionki chcieliśmy uzyskać?
Aby rozwiązać problem dziedziczenia, powstała jednostka rem. Dzięki temu ostatni element będzie miał wielkość czcionki uzależnioną od rozmiaru czcionki w elemencie <html>.
Kod HTML
<div class="font-1">em</div> <div class="font-2">ex</div> <div class="font-3">ch</div> <div class="font-4">rem</div>
Kod CSS
.font-1 {
font-size: 2em;
}
.font-2 {
font-size: 2ex;
}
.font-3 {
font-size: 2ch;
}
.font-4 {
font-size: 2rem;
}
Efekt działania kodu
Jednostki względne obszaru wyświetlania
Tworząc aplikacje internetowe nie wiemy na jakich urządzeniach będą wyświetlane. Dlatego jeżeli chcemy dostosować je do wielkości ekranu użytkowników możemy skorzystać z jednostek procentowych obszaru wyświetlania. To jednostki, które określają procentową wartość powierzchni na której wyświetlana jest aplikacja. Dla przykładu jeżeli mamy ekran o rozdzielczości 800×600 i ustawimy szerokość elementu na 50vw, to w efekcie element ten będzie miał na tym urządzeniu szerokość równą 400px, zaś dla rozdzielczości 1920×1080 szerokość będzie równa 960px. Poniżej przedstawiam wszystkie jednostki obszaru wyświetlania:
- vw – procentowa szerokość obszaru wyświetlania
- vh – procentowa wysokość obszaru wyświetlania
- vmin – mniejsza z wartości vw lub vh
- vmax – większa z wartości vw lub vh
Kod HTML
<div class="viewport-1"></div> <div class="viewport-2"></div> <div class="viewport-3"></div> <div class="viewport-4"></div>
Kod CSS
.viewport-1 {
width: 5px;
height: 20vh;
background: saddlebrown;
}
.viewport-2 {
width: 20vw;
height: 5px;
background: peru;
}
Efekt działania kodu
Jednostki bezwzględne
To jednostki z których należy korzystać wyłącznie wtedy, kiedy znamy wymiary urządzenia na którym będzie wyświetlana nasza aplikacja. Zastosowanie jednostki bezwzględnej spowoduje, że dany element niezależnie od rozdzielczości zawsze będzie przyjmował dokładnie taki sam rozmiar. Zatem jeśli przyjmiemy, że tworzony przez nas element będzie miał szerokość 50 px, to będzie miał taki rozmiar zarówno na telefonie z rozdzielczością 960×640, jak również na urządzeniu o rozdzielczości 1920×1080. Poniżej przedstawiam listę jednostek bezwzględnych:
- mm – milimetry
- cm – centymetry
- in – cale, 1in = 2.54cm
- pt – punkty, 1pt = 1/72in
- pc – pika, 1pc = 12pt
- px – piksele, 1px = 1/96in
Kod HTML
<div class="absolute-1"></div> <div class="absolute-2"></div> <div class="absolute-3"></div> <div class="absolute-4"></div> <div class="absolute-5"></div> <div class="absolute-6"></div>
Kod CSS
.absolute-1 {
width: 10mm;
height: 10mm;
background: red;
}
.absolute-2 {
width: 10cm;
width: 10cm;
background: blue;
}
.absolute-3 {
width: 5in;
height: 5in;
background: yellow;
}
.absolute-4 {
width: 10pt;
height: 10pt;
background: grey;
}
.absolute-5 {
width: 5pc;
height: 5pc;
background: greenyellow;
}
.absolute-6 {
width: 100px;
height: 100px;
background: pink;
}
Efekt działania kodu
Podsumowanie
Jak mogliście zobaczyć w CSS mamy do dyspozycji sporą ilość jednostek. Pracując z aplikacjami Responsive Web Design najczęściej wykorzystuję rem, vw oraz vh. Dzięki stosowaniu tych jednostek tworzona aplikacja może bezproblemowo dostosowywać się do wielkości urządzenia na którym została uruchomiona.
Chciałbym jeszcze dodać, że istnieje coś takiego jak standardowa wielkość czcionki, która w nowoczesnych przeglądarka wygląda następująco:
100% = 1 em = 16 px = 12 pt = 1 pcc
