czy w tym jednym używać jak najmaniej określania wielkości w pikselach i zastąpić je procentami żeby to się nie sypało
Ja osobiście jeśli robię strony responsywne (bo tak nazywa się technika robienia stron które mają się nie sypać) , to używam tylko i wyłącznie jednostek takich jak %, em, vh, vw, vmin, vmax. Po krótce Ci o nich opowiem:
% - chyba nie muszę tłumaczyć
em - jest to wielkość czcionki rodzica lub danego elementu.
Czyli jeśli mamy zapis:
.div
{
font-size: 15px;
height: 2em;
}
to wysokość elementu .div jest równa 2*15px=30px;
vh (vievport height) - jednostka ta jest równa 1% wysokości okna przeglądarki, Czyli jeśli chcemy mieć element który będzie miał wysokość 20% wysokości ekranu, to dla tego elementu dajemy
height: 20vh;
vw (vievport width) - jednostka ta jest równa 1% szerokośći okna przeglądarki, analogicznie do vh jeśli chcemy mieć element który będzie miał 80% szerokości ekranu, to dla tego elementu dajemy
vmin - jest to vh lub vw w zależności od tego które jest mniejsze. Jednostka ta jest szczególnie przydatna, gdy chcemy uzyskać takie same proporcje elementów, czcionek, marginesów na urządzeniach mobilnych, które mogą przeglądać stronę w orientacji pionowej lub poziomej.
vmax - jak wyżej, vh lub vw, tyle, że w zależności od tego które jest większe.
W projekcie, który teraz robię ani razu nie użyłem jednostki px! Naprawdę, bez pixeli da się żyć, a w dodatku można sobie na szybko policzyć ile px to 1vh w oknie naszej przeglądarki. Wysokość okna mojej przeglądarki jest równa około 1000px. Aby policzyć, ile px to vh musimy podzielić wysokość przez 100. 1vh=1000px/100=10px. Analogicznie robimy z vw oczywiście :)
