Świetnie, mam jeszcze jedno pytanie z jednostkami. Jeśli próbuję coś zamieniać, porządkuję na stronie żeby było po równo, to moja strona domyślnie ma width: 100vw, oraz height 100vh?
Chciałbym zauważyć, że nie jest to tematem tego wątku; ale odpowiem. Hm, nie powiedziałbym "strona", ale, powiedzmy, "widok" – czyli dokładnie ta treść, którą "naraz" widzisz na ekranie. Dokładnie masz to opisane na już wspomnianej stronie: https://developer.mozilla.org/en-US/docs/Web/CSS/length:
vh
Equal to 1% of the height of the viewport's initial containing block.
vw
Equal to 1% of the width of the viewport's initial containing block.
Zaznaczę, że celowo jest tu napisane "viewport's initial containing block", a nie po prostu "viewport width". Ja nie miałem okazji dokładnie tego studiować, więc dla dokładnej definicji terminu "containing block" zobacz specyfikację: https://drafts.csswg.org/css2/visudet.html#x0
Pamiętaj, że w szerokości 100vw
zawiera się też miejsce na ewentualne paski przewijania na stronie, więc musisz odsuwanie od nich treści sam obsłużyć.
Bo czytałem również, że teoretycznie width: 100% = width: 100vw, ale vw są relatywne względem okna, w % względem rodzica.
Powiedziałbym, że wartość width: 100%
dla danego elementu może odpowiadać wartości width: 100vw
pod pewnymi warunkami. Zazwyczaj (zawsze?), jeżeli element ma width: 100%
, to tylko wtedy odpowiada to width: 100vw
, gdy rodzic elementu posiada szerokość 100vw
(nie piszę width: 100vw
, bo szerokość obliczana przez przeglądarkę jest czymś innym niż nadana przez programistę). Piszę "zawsze?" ze znakiem zapytania, bo mogę nie znać jakichś przypadków granicznych (innymi słowy, mogę się mylić co do wszystkich przypadków), więc w sprawie dokładnych definicji – zobacz specyfikację, np.: https://drafts.csswg.org/css2/visudet.html#x0
I jeszcze jedna sprawa, powinienem unikać używania px i zastąpić czymś innym?
Nie powinieneś "unikać px". Nie jestem ekspertem, ale w mojej opinii należy jednostki stosować stosownie do okoliczności. Jeżeli ustawiasz np. szerokość linii – myślę, że sensownie byłoby dać szerokość w pikselach (np. border-width: 2px
). Z drugiej strony, jeżeli masz np. szerokość panelu bocznego na stronie, możesz spróbować zaszaleć i ustawić mu rozmiar w %
– aczkolwiek ja skłaniałbym się do porzucenia %
i zrobienia po prostu CSS grid-a na całej stronie. Są jeszcze takie opinie i warto je znać: https://benfrain.com/just-use-pixels/
Bo tak mi się wydaje, że rozdzielczość to każdy ma inną, zależnie od urządzenia i na czym strona jest wyświetlana, jeśli chodzi o przekątną np monitora.
Nie studiowałem tego tematu dokładnie, więc nie chcę się wypowiadać.