Kiedy powinienem używać jednostek rem, em, % i pikseli?

Niedawno przeglądając internet znalazłem całkiem interesujące pytanie odnośnie jednostek miar, mianowicie kiedy powinno się używać poszczególnych z nich? Szybki flashback uświadomił mi, że sam miałem ten problem kiedy zaczynałem swoją przygodę z projektowaniem stron internetowych. Od tamtej pory nauczyłem się jednego – na to pytanie nie ma prostej odpowiedzi, każdy deweloper używa ich według swojego upodobania, są one w końcu zaledwie narzędziami. Możesz oczywiście używać w projekcie wszystkich jednostek miar, co jest w pewnym sensie odpowiednim rozwiązaniem, jednak gdzie używać poszczególnych?

 

Piksele
Zacznę od podstawowej jednostki, mianowicie pikseli. Piksele to najprościej mówiąc stały rozmiar, nieważne co byś zrobił dany element zawsze będzie tej samej wielkości. Z jednej strony brzmi to super, lecz jednak co z responsywnością strony? Dzięki @media queries nie trzeba się o nic martwić, wystarczy stworzyć odpowiednie reguły dla danych roździelczości bądź też innych parametrów urządzenia. Jednak to również nie brzmi najlepiej, przecież gdyby każdą wartość ustawiać w pikselach trzeba by było pisać stronę dla każdej roździelczości! Właśnie dlatego nie ustawia się każdej wartości w pikselach, lecz również korzysta się z innych jednostek miar w poszczególnych elementach. Problemem pikseli jest również to, że urządzenia używają różnych szerokości pikseli (jednak i na to jest rozwiązanie, mianowicie: meta name="viewport" content="width=device-width, initial-scale=1.0").

 

Procenty
Procenty znajdują najlepsze zastosowanie w budowaniu układu strony (layout), czyli przy tworzeniu kontenerów, rzędów i kolumn. Chcesz żeby twój nagłówek zajmował pełną szerokość ekranu? Zdjęcie wypełniało element w którym zostało umieszczone? Podzielić panel na dwie części? W tych przypadkach najlepszym wyjściem będzie zastosowanie procentów. Z pewnością odradzam stosowanie procentów w takich elementach jak wielkość tekstu (font-size) albo wysokości elementów jak divy (tutaj jednak jest to moja prywatna opinia, o wiele bardziej preferuje rem bądź piksele).

 

EM
A czym właściwie jest to całe „EM”? Już śpieszę z wyjaśnieniem. Wartość ta jest uzależniona od elementu nadrzędnego (rodzica) naszego elementu, czyli najprościej rzecz ujmując: jeżeli mamy układ strony div p i w elemencie div ustawimy wartość font-size na 15px, a w elemencie p na 2em, to przeglądarka obliczy wartość rozmiaru czcionki w elemencie p stosując działanie 2em × 15px = 30px, z czego wynika, że 1em to po prostu wartość danej własności w rodzicu elementu. Co jednak w wypadku, gdyby element div nie zawierał własności font-size? Odpowiedź jest prosta, przeglądarka dokonałaby obliczenia na podstawie domyślnej wartości jaką posiada, w tym wypadku przeważnie jest to 16px. Osobiście staram się unikać „em”, przy zmianie jednej wartości może się okazać, że reszta strony nam się posypie, a w przypadku pracy z komponentami które są drukowane w locie z osobnych plików php (czyli na przykład widgety w wordpressie) nie wiadomo jakie wartości będzie miał rodzic, dlatego też nie będę opisywał szerszego zastosowania tej jednostki.

 

REM
Jednostka REM to po prostu „root em”, czyli znana nam już jednostka em, której wielkość, zamiast od rodzica, uzależniona jest bezpośrednio od roota naszego dokumentu (czyli zazwyczaj od znacznika html). Wartość nadrzędną definiujemy raz, w elemencie html, po czym odnosimy się do niego bezpośrednio ustawiając wielkość czcionki w poszczególnych elementach na stronie. Ujmując to najprościej jak się da: Jeżeli zmienisz wielkość czcionki w znaczniku HTML to wszystkie czcionki z wartością rem ulegną zmianie. Oprócz czcionek możesz skalować rozmiary komponentów, obramowania oraz marginesy, aby zachować odpowiednie proporcje, jednak większość elementów strony powinna być niezależna od rozmiaru czcionki kontenera i być podatna na powiększanie przez przeglądarkę, a rem nie jest na to podatny.

 

Viewport Units
Są one rozmiarem względem obszaru roboczego, vw (viewport width) dla szerokości a vh (viewport height) wysokości. Dzięki nim możesz ustawić rozmiar elementu na stronie dokładnie względem okna przeglądarki. 1vh jest równy 1% wysokości obszaru roboczego ekranu, tak samo jak 1vw jest równy 1% szerokości. W przypadku obszaru roboczego ekranu o szerokości 1000px ustawienie wartości 1vw będzie wynosiło 10px, ponieważ 1% x 1000px = 10px. Ustawienie wszystkich marginesów wewnętrznych (padding) jako 1vw sprawia, że ​​cała strona ładnie się dopasowuje. Osobiście jednak bardzo rzadko używam VU, bardzo rzadko zdarza się, że potrzebujesz aby element skalował się z wysokością/szerokością dokumentu a w innych przypadkach używanie VU mija się z celem.

 

No dobrze, ale kiedy z czego korzystać?
Osobiście używam jednostki rem w wysokościach elementów i procentów w przypadku szerokości. Przy tworzeniu nagłówka z tekstem i przyciskami w celu określenia wysokości tego elementu przeważnie używam rem bądź pikseli, a procentów w szerokości. vh i vw mogą być przydatne dla obiektów najwyższego poziomu (czyli np. body bądź html), ale nie dla komponentów układu, które można umieścić w wielu obszarach (czyli na przykład przycisk w jakimś panelu). Większość jest jednak kwestią indywidualną dewelopera, wszystko da się osiągnąć wykorzystując przeróżne metody, i dla każdego inna metoda może być tą wygodniejszą.

źródło komiksu

Dodaj komentarz

*Wypełnij wszystkie pola poprawnie

BYĆ MOŻE TO CIĘ ZAINTERESUJE

Dodane przez Alex Pietrzak | 6 kwietnia 2018
Przygotowanie do egzaminu praktycznego E14/K2 #1 – HTML I CSS
Zgodnie z nową podstawą programową egzaminy E12 i E13 zostają połączone w jedną kwalifikacje - K1, natomiast E14 zostaje przemianowane na kwalifikację K2, o wdzięcznej nazwie "Programowanie, tworzenie i administrowanie...
Dodane przez Alex Pietrzak | 19 stycznia 2018
Bootstrap 4 w końcu wydany!
Po niezliczenie wielu publikacjach wersji alpha i beta oraz przesuwaniu daty oficjalnej premiery w końcu jest, bootstrap 4 miał wczoraj oficjalną premierę. Jednak dla osób, które korzystały z którejś z...
Dodane przez Alex Pietrzak | 30 listopada 2017
Jak odpowiednio dobierać kolory? Teoria kolorów dla początkujących web deweloperów.
Wybór kolorystyki to jedna z pierwszych decyzji podczas projektowania strony. Ważnym jest, aby dobrać ją odpowiednio do charakteru strony (widzieliście kiedyś wnętrze szpitala w odcieniach czerni?) i obranego przez nas...