View port units provide 4 different variants for both height and width but why is this? well mainly this is for mobile browsers due to the way some onscreen elements (e.g the address bar) may disappear when scrolling which gives us a different viewport to work with. In these cases the single vh unit would either need to change to reflect the new real estate available or stay the same size but be incorrect.

So we have the small view port height which is does not change and always represents the available height with all optional UI elements in place, such as the address bar and navigation buttons.

Then we have the large view port height (lvh) which does not change and always represents the available height will no UI elements showing.

And finally the dynamic view port height which will change in real time to reflect the available space as these UI elements are shown or hidden.

We have the same for width as the above, but currently these units will all return the same value as no mobile browsers place UI elements to the sides of the screen. But in the future if this happens then the width units svw, lvw and dvw will come to our rescue.

vh viewHeight
svh smallViewHeight
lvh largeViewHeight
dvh dynamicViewHeight

vw viewWidth
svw smallViewWidth
lvw largeViewWidth
dvvw dynamicViewWidth

Useful links for more reading:
[ Ссылка ]

свернуть