Cześć!
Px najczęściej używasz, gdy chcesz ustalić coś na sztywno, na przykład chcesz mieć miniaturkę zdjęcia, która ma 300px niezależnie od wyświetlanego ekranu. % używamy, gdy jakiś element na naszej stronie powinien być skalowany, albo zmieniać swoje położenie, na przykład:
margin-top:25%;
Możliwe są także połączenia:
width: 5%;
max-width: 300px;
Dodatkowo, często wykorzystywane są jednostki o wartości em, w szczególności dla tekstów, paragrafów. Chodzi o to, że ustawiając np.
font-size: 1.5em;
przeskalujemy rozmiar czcionki elementu nadrzędnego 1.5 raza (div- 10px; p - 15px). I w ten sposób, zmieniając tylko jedną wartość, będziemy w stanie zmieniać rozmiar wszystkich innych tekstów. Analogicznie działa rem, tylko wtedy skalujemy coś względem najniższego elementu, czyli body.