Rodzaje jednostek
Większość właściwości w stylach przyjmuje wartości liczbowe. Biorąc pod uwagę wysokość elementu, rozmiar czcionki bądź parametry pozycji, zawsze określamy wartości liczbowe oraz jednostkę miary.
Poniżej dodaję najczęstsze jednostki miar:
- px – najważniejsza jednostka, określająca wielkość w pikselach, np. dla monitora komputera,
- % – procentowa wartość jest zależna od kontekstu, np. szerokości nadrzędnego kontenera,
- em – mnożnik aktualnego rozmiaru elementu nadrzędnego,
- rem – bazuje na podstawowym rozmiarze czcionki strony (16px lub takim jaki przypisane dla tagu HTML),
- vw – bazuje na szerokości okna (1vw = 1/100 szerokości okna),
- vh – bazuje na wysokości okkna (1vh = 1/100 wysokości okna).
Przykład. Przede wszystkim spójrz na kod CSS w dolnej części. Umieściłem w nim reguły w których zastosowałem takie same wartości liczbowe, ale z różnymi jednostkami. W podglądzie te reguły pokazane są za pomocą pasków, gdzie przyjmują one różne szerokości, ze względu na inne jednostki.
frosty-darwin-08l59
frosty-darwin-08l59 by danielminschinski
Piksele
Piksele (px) są sztywną, bezwzględną jednostką. Wartość podana w nich będzie zawsze taka sama niezależnie od innych czynników. Używane są wtedy, gdy musimy mieć pewność, że dane wartości zawsze w każdych warunkach będą takie same.
W powyższym przykładzie możesz pobawić się wartością związaną z pikselami. Zauważysz różnice w długości paska.
Procenty
procenty są jednostkami elastycznymi. Co to oznacza? Jeżeli zastosujemy je przy określeniu szerokości elementu, to będzie ona zależna od tego ile ma dostępnego miejsca, która daje jej zawierający ją kontener.
Pobaw się, wprowadź 50% zamiast 25%. Pasek powinien być w połowie białego kontenera.
Relatywnie wobec czcionki
Poniższe jednostki nie wskazują wprost rozmiaru. Określają na podstawie relacji do innych elementów, tzn. są relatywne.
- em – jednostka określająca wartość względem rozmiaru czcionki elementu nadrzędnego. Przykładowo, jeżeli ustawisz rozmiar czcionki elementu nadrzędnego na 16px a rozmiar czcionki elementu potomnego na 2em, to po przeliczeniu rozmiar czcionki będzie wynosił 32px (wynik mnożenia). Według naszego przykładu, można łatwo obliczyć ile pikseli zajmuje pasek mający ustawioną jednostkę na 25em. A więc liczymy, 25em x 16px = 400px
- rem – analogicznie działająca jednostka jak em, tylko że odnosi się do rozmiaru czcionki całej strony (przypisany rozmiar do tagu). Domyślnym rozmiarem 1rem = 16px. Według naszego przykładu, można łatwo obliczyć ile pikseli zajmuje pasek mający ustawioną jednostkę na 25rem. A więc liczymy, 25rem x 16px = 400px.
Zależne od okna
Relatywne jednostki do rozmiarów okna są przydatne przy tworzeniu szkieletu strony, w których wymiary mają być wyliczone co do piksela. Jednak nie jest to ich jedyne zastosowanie. Stosujemy je głównie tam, gdzie % nie nadaje się.
- vh – jednostka zależna od wysokości okna (1vh = 1/100 wysokości okna),
- vw – jednostka zależna od szerokości okna (analogicznie 100vw = cała szerokość okna).
Na potrzeby wyraźnego pokazania różnicy między jednostkami dodaję zmodyfikowany powyższy przykład. Diva z klasą hero ustawiłem na wysokość 100vh. Szerokość kontenera została zmodyfikowana na 70vw.
elastic-sound-4yr19
elastic-sound-4yr19 by danielminschinski
To by było na tyle w temacie jednostek w CSS. Jest ich kilka, każda inaczej interpretowana. Ważne jest, aby używać ich w odpowiedni sposób. Do elementów graficznych nie bać się stosować vh i vw. Dla czcionek odpowiednimi są px oraz em i rem. Procenty są uniwersalne względem elementów graficznych. Takie jest moje zdanie.
W kolejnym materiale będzie o formatowaniu deklaracji CSS. Przedstawię właściwości przyjmujące kilka parametrów.
Tak jak zwykle ▶ polecam zapisywać się do poniższego 💥newslettera💥
Jeżeli chciałbyś/chciałabyś wesprzeć mój blog to zapraszam -> WSPARCIE DLA BLOGA