What is Viewport-Percentage (or Viewport-Relative) Lengths?
The viewport-percentage lengths are relative to the size of the initial containing block. When the height or width of the initial containing block is changed, they are scaled accordingly.
So, by using viewport-percentage lenghts, HTML elements adjust automatically when the height or width of the screen changes.
There are a few options you may find useful:
vh (viewport height)
vw (viewport width)
vmin (viewport minimum length)
vmax (viewport maximum length)
Here’s just a simplified code example of the HTML: