Jedną z najtrudniejszych rzeczy podczas budowania strony internetowej jest dobieranie odpowiednich wymiarów elementów. A konkretnie ich wielkości i szerokości tak by strona wyglądała dobrze.
Przeważnie na stronach internetowych, ale nie tylko do określenia wymiarów korzysta się z jednostek takich jak: piksele (px) oraz procentów (%). To jednak nie są jedyne jednostki jakie do tego celu są stosowane.
CSS posiada kilka różnych jednostek z pomocą, których możemy manipulować obiektami na na stronie (HTML). Na niektórych stronach stosuje się czasem nawet więcej niż jeden typ jednostek. Co w pewnym momencie może doprowadzić do chaosu! Do tego typu sytuacji może dojść kiedy korzystamy z jednostek, w zupełnie przypadkowy sposób.
O ile px są jednostką „stałą” (bezwzględną) interpretowaną w ten sam sposób w różnych miejscach. Nie nie musi być jednak tak samo w przypadku innych jednostek jakie możemy użyć na stronie.
W praktyce każdemu. Chociaż nie zaleca się do każdego z nich używać dowolnych jednostek miar. Chodzi o elementy takie jak np. body, *, html. W ich przypadku lepiej używać pikseli (np. do tekstu, maksymalnej szerokości) lub procentów (np. do szerokości) – dzięki czemu mamy lepszą kontrolę nad ich zachowaniem.
Przykładowe własności CSS gzie możemy „bawić” się jednostkami:
W większości przeglądarki nie mają większego problemu z interpretacją popularnych wymiarów określanych w CSS. Jednak w przypadku mniej popularnych (choć czasami bardzo użytecznych wygląda to nieco inaczej).
| Nazwa jednostki | Chrome | Internet Explorer | Firefox | Safari | Opera |
|---|---|---|---|---|---|
| em, ex, %, px, cm, mm, in, pt, pc | 1.0 | 3.0 | 1.0 | 1.0 | 3.5 |
| ch | 27.0 | 9.0 | 1.0 | 7.0 | 20.0 |
| rem | 4.0 | 9.0 | 3.6 | 4.1 | 11.6 |
| vh, vw | 20.0 | 9.0 | 19.0 | 6.0 | 20.0 |
| vmin | 20.0 | 9.0* | 19.0 | 6.0 | 20.0 |
| vmax | 26.0 | Nie wspiera | 19.0 | 7.0 | 20.0 |
Jak widać mamy całkiem sporo tych jednostek. Jednostki te możemy podzielić dwa typy: względne i bezwzględne. Jest to bardzo istotna informacja podczas użytkowania z nich.
Jednostki względne wykorzystujemy, gdy chcemy dostosować się rozmiaru innego elementu. Czyli np. ustawić rozmiary nagłówków odpowiednio większy lub mniejszy od reszty tekstu na stronie.
Tą grupę możemy podzielić na 2 podgrupy. Podział ten wynika ze względu na to w stosunku do jakiego elementu dostosowuje się obiekt.
Do tej grupy zaliczają się jednostki takie jak:
Obiekty posiadające rozmiary opisane w ten sposób będą ulegać zmianie wraz z obiektem nadrzędnym. Czyli np. w momencie gdy na tablecie będziemy chcieli mieć podstawowy rozmiar fontu zamiast 18px np. 16px. To bez naszej ingerencji rozmiary pozostałych elementów się zmienią. Dostosowując się do nadrzędnego.
Poniżej możecie zobaczyć porównanie jednostek REM z EM w praktyce.
Do tej grupy zaliczają się również wymiary dostosowujące się do wymiarów okna przeglądarki internetowej:
Tutaj obiektem nadrzędnym jest sama przeglądarka. To do jej rozmiarów font samodzielnie się dostosowuje. W efekcie ten sam tekst na dużym monitorze może być olbrzymi a na tablecie mały.
Tak jak już napisałam obiekty z tymi jednostkami dostosowują się do obiektów nadrzędnych. W praktyce więc ewentualne modyfikacje pod kontem RWD często ograniczają się jedynie do manipulacji głównym obiektem a nie jednostką.
Co nie oznacza, że nigdy nie spotkamy się z przypadkiem gdy trzeba będzie zmienić wartość jednostki bo będzie za duża lub za mała.
Są to jednostki o stałych wymiarach. Ewentualne zmiany w rozmiarze są wynikiem sposobu interpretacji przeglądarki i raczej powinny być niewielkie. Do tej grupy zaliczamy:
W tym wypadku to my musimy pilnować czy rozmiar obiektu na pewno nie jest za duży. Obiekty pozostają w stałych wielkościach bez problemu mogą więc być za szerokie lub za wysokie. Dlatego to my musimy pilnować by do takich sytuacji nie dochodziło.
Jak widzicie trochę tych jednostek istnieje. Teraz pojawia się pytanie, których używać? Jeśli korzystacie z gotowych bibliotek CSS takich jak Bootstrap to najlepiej skorzystać z tych samych jednostek co biblioteka. W przypadku Bootstrap są to px, % i rem.
Chociaż sama używam em.? Jakoś bardziej do mnie przemawia.
Jeżeli sami budujecie stronę od podstaw to polecam px, % i właście em zamiast rem. Jednak nikogo nie zmuszam a zachęcam do sprawdzenia co lepiej działa.
źródła:
Jak w przypadku wielu różnych tematów tak i w przypadku marki osobistej pojawiło się przez…
Choć zabrzmi to może nieco dziwnie to wprowadzenie AI (sztucznej inteligencji) do naszego życia było…
Widmo Brockenu to dość rzadko spotykane zjawisko optyczne, najczęściej widywane w wysokich partiach gór. Można…
Zacznę może od tego, że relikwia, relikwii nie równa. Wiem jeśli nie ma się pojęcia…
Logo stanowi jeden z ważniejszych elementów tożsamości wizualnej praktycznie każdej firmy, marki czy projektu. Logo…
Budując własną markę osobistą lub chcąc ją zbudować trzeba liczyć się z wieloma wyzwaniami. Jednym…