Czego potrzebujesz to Responsive Web Design.
https://codepen.io/avexperi/pen/oNEOjyq
tutaj pokazałem ci jak liczony jest height i width w procentach, jak wspomniał Marchiew w innym komentarzu od rozmiarów rodzica.
Jeśli chcesz aby wymiar elementu był liczony w procentach od szerokości i wysokości ekranu potrzebujesz tych dwóch jednostek:
vw - to procent liczony od szerokości okna przeglądarki, czyli 50vw to 50 procent szerokości okna przeglądarki niezależnie od rozmiarów innych elementów.
vh - to analogicznie procent liczony od wysokości okna przeglądarki.
Oczywiście jeśli element znajduje się w <body>, nie mając innego rodzica
<body>
<div class="element">
</div>
</body>
to nie ma większego znaczenia czy dla tego elementu ustawisz 100% czy 100vw (może być drobna różnica przez pasek do scrollowania, 100vw liczy szerokość całego okna razem z paskiem scrollowania).
Ogólnie podsumowując, żeby wszystko się należycie wyświetlało na wszystkich urządzeniach należy pouczyć się trochę o responsive web design, obrać jeden z dostępnych systemów opracowanych przez kogoś bądź rozwinąc swój system, albo przynajmniej skuteczne metody, na podstawie zdobytej wiedzy.